Flat Responsive WordPress Blog Theme

Színátmenet CSS segítségével

2:57 APeti 0 Kommentek Kategória : , , , , , , , ,

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

Divi WordPress Theme

KAPCSOLÓDÓ BEJEGYZÉSEK

0 hozzászólás