Színátmenet CSS segítségével
Weblapunkhoz készíthetünk színátmenetes háttereket a CSS segítségével is, amelyhez nagyon jó segítséget adnak a CSS generatorok. Ezek az ingyenesen használható generátorok időt spórolhatnak nekünk a css kód írásakor, mert elkészítik nekünk a megfelelő színek kiválasztása után a teljes böngészőfüggetlen css kódot :)
Az egyik ilyen weblap amit használok a www.colorzilla.com/gradient-editor/ .
Egy éve még grafikai programmal készített színátmeneteket használtam a weboldalak elkészítésénél, de újabban már a CSS kódban csinálom meg mindezt. A bonyolultabb színátmeneteknél vagy design elemeknél még megmaradt a jpg vagy png háttér.
Egy minta közép kékből sötét kékbe átmenet kódja:
background: #005e91; /* Old browsers */
background: -moz-linear-gradient(top, #005e91 0%, #002a53 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005e91), color-stop(100%,#002a53)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #005e91 0%,#002a53 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #005e91 0%,#002a53 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #005e91 0%,#002a53 100%); /* IE10+ */
background: linear-gradient(to bottom, #005e91 0%,#002a53 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005e91', endColorstr='#002a53',GradientType=0 ); /* IE6-9 */
A css színátmenet képe |
Gombokat is készíthetünk egyszerűen az alábbi weblap segítségével.
http://css3buttongenerator.com/
A minta kód így néz ki:
.btn { background: #3498db; background-image: -webkit-linear-gradient(top, #3498db, #2980b9); background-image: -moz-linear-gradient(top, #3498db, #2980b9); background-image: -ms-linear-gradient(top, #3498db, #2980b9); background-image: -o-linear-gradient(top, #3498db, #2980b9); background-image: linear-gradient(to bottom, #3498db, #2980b9); -webkit-border-radius: 28; -moz-border-radius: 28; border-radius: 28px; font-family: Arial; color: #ffffff; font-size: 20px; padding: 10px 20px 10px 20px; text-decoration: none; } .btn:hover { background: #3cb0fd; background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); background-image: -o-linear-gradient(top, #3cb0fd, #3498db); background-image: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none; }
Divi sablonnal készített weboldalak |
0 hozzászólás