Készíts látványos weboldal grafikát egyszerűen CSS színátmenet 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;
}