CSS Beispiele

Hier ein paar Beispiel für Lösungen mit Cascaded Style Sheets.

@media (max-width: 500px) {
  .img_slider {
    width: 100px;
    height: 100px
  }
}
 
@media (min-width: 501px) {
  .img_slider {
    width: 200px;
    height: 200px
  }
}
.farbe_wechseln {
  padding: 5px 5px 3px;
  margin-left: -1px;
  background: -webkit-linear-gradient(#a65600, #eeac5d);
  background: -o-linear-gradient(#a65600, #eeac5d);
  background: -moz-linear-gradient(#a65600, #eeac5d);
  background: linear-gradient(#a65600, #eeac5d);
  color: #fff;
  font-size: 14px
}
.div_beispiel {
  transition: all .3s;
  -webkit-transition: all .3s
}

Dieses Modul erlaubt in den Accordions der Georgienseite nach unten weisende Pfeile.

.arrowbox { 
  position: relative; 
}
.arrowbox:after, .arrowbox:before { 
  right: 0px; 
  top: 50%; 
  border: solid transparent; 
  content: " "; 
  height: 0; 
  width: 0; 
  position: absolute; 
  pointer-events: none; 
}
.arrowbox:after { 
  border-color: rgba(166, 86, 0, 0); 
}
.arrowbox:before { 
  border-color: rgba(255, 193, 55, 0); 
  border-left-color: #a65600; 
  opacity: 0.5; border-width: 6px; 
  margin-top: -6px; 
}

Bei der Sitemap wird ein Text rechts des Links angezeigt, wenn man mit der Maus über den Link geht.

a.text_link_small span {
  font-size: 13px;
  font-weight: 400;
  position: absolute;
  visibility: hidden;
  margin-left: 80px;
  margin-top: 16px;
  padding: 5px 10px;
  max-width: 400px;
  text-align: left;
  text-decoration: none
}

a.text_link_small:hover span {
  visibility: visible;
  color: #a65600;
  border: none;
  margin-left: 60px;
  margin-right: 15px;
  border-top: 1px #a65600 solid;
  border-right: 1px #a65600 solid;
  background-color: rgba(255, 255, 255, 0.8)
}  
.scrollicon {
  text-align: center;
  text-decoration:none;
  width:50px;
  height:50px;
  background:#eeac5d;
  opacity:0.7;
  position:fixed;
  bottom:50px;
  right:20px;
  display:none;
  border: 1px solid #fff;
}
.scrollicon:hover {
  text-decoration:none;
  background:#a65600;
  color:#eeac5d;
}
.scrollicon div {
  font-weight:normal;
  font-size:28px;
  padding-top:1px;
}  
Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
  • css_beispiele.txt
  • Zuletzt geändert: 24/09/2018 14:23
  • von Thomas Berscheid