CSS - Snippets

Aus Wikizone
Wechseln zu: Navigation, Suche

Siehe auch CSS - Baukasten (alt)

Links

htmllion.com - scheint eine gute Seite für alles mögliche zu sein

CSS - Animation

CSS - Animation

Diverse CSS Snippets

CSS - Stitched Look - aufgenäht

CSS - bildschirmfüllendes Hintergrundbild

CSS - Mehr Raum bei Anchor-Sprüngen

Fixes Seitenlayout "springt" wegen Scrollbalken

Entweder minimale Höhe definieren oder den Scrollbalken immer anzeigen: 

/*not valid but works in all browsers exept Opera*/

html {
       overflow-y: scroll;
}

/* only Mozilla (IE has always Scrollbars)*/
overflow: -moz-scrollbars-vertical;

Radius

Vorsicht bei Bildern. Diese werden nicht beschnitten (Stand 2011) 

-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;

Schatten

.schatten
{
box-shadow: 3px 3px 5px #888;
-webkit-box-shadow: 3px 3px 5px #888;
-moz-box-shadow: 3px 3px 5px #888;
}

Die Werte bezeichnen: Versatz in x-Richtung, y-Richtung, den Wert für das Weichzeichnen und natürlich die Schattenfarbe.


Schatten auf alten IE Obsolet, diese Browser sollten sich erledigt haben. Mit Microsoft Filter Funktionen. Es gibt zwei unterschiedliche Schatten Filter. Beide liefern ein eher mäßiges Ergebnis. 

.ie-schlagschatten
{
filter:progid:dxImageTransform.Microsoft.dropShadow(color=#8888,offX=3,offY=3 positive=true);
}

.ie-schatten
{
filter:progid:DXImageTransform.Microsoft.Shadow(color='#8888',direction='120',strength='3');
}

Texteffekte

Schicke Text-Schatteneffekte

http://codepen.io/juanbrujo/pen/yGpAK (2016-12)

CSS (SASS) 

h1 {
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  font-size: 92px;
  padding: 80px 50px;
  text-align: center;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
  
  &.elegantshadow {
    color: #131313;
    background-color: #e7e5e4;
    letter-spacing: .15em;
    text-shadow: 
      1px -1px 0 #767676, 
      -1px 2px 1px #737272, 
      -2px 4px 1px #767474, 
      -3px 6px 1px #787777, 
      -4px 8px 1px #7b7a7a, 
      -5px 10px 1px #7f7d7d, 
      -6px 12px 1px #828181, 
      -7px 14px 1px #868585, 
      -8px 16px 1px #8b8a89, 
      -9px 18px 1px #8f8e8d, 
      -10px 20px 1px #949392, 
      -11px 22px 1px #999897, 
      -12px 24px 1px #9e9c9c, 
      -13px 26px 1px #a3a1a1, 
      -14px 28px 1px #a8a6a6, 
      -15px 30px 1px #adabab, 
      -16px 32px 1px #b2b1b0, 
      -17px 34px 1px #b7b6b5, 
      -18px 36px 1px #bcbbba, 
      -19px 38px 1px #c1bfbf, 
      -20px 40px 1px #c6c4c4, 
      -21px 42px 1px #cbc9c8, 
      -22px 44px 1px #cfcdcd, 
      -23px 46px 1px #d4d2d1, 
      -24px 48px 1px #d8d6d5, 
      -25px 50px 1px #dbdad9, 
      -26px 52px 1px #dfdddc, 
      -27px 54px 1px #e2e0df, 
      -28px 56px 1px #e4e3e2;
  }
  &.deepshadow {
    color: #e0dfdc;
    background-color: #333;
    letter-spacing: .1em;
    text-shadow: 
      0 -1px 0 #fff, 
      0 1px 0 #2e2e2e, 
      0 2px 0 #2c2c2c, 
      0 3px 0 #2a2a2a, 
      0 4px 0 #282828, 
      0 5px 0 #262626, 
      0 6px 0 #242424, 
      0 7px 0 #222, 
      0 8px 0 #202020, 
      0 9px 0 #1e1e1e, 
      0 10px 0 #1c1c1c, 
      0 11px 0 #1a1a1a, 
      0 12px 0 #181818, 
      0 13px 0 #161616, 
      0 14px 0 #141414, 
      0 15px 0 #121212, 
      0 22px 30px rgba(0, 0, 0, 0.9);
  }
  &.insetshadow {
    color: #202020;
    background-color: #2d2d2d;
    letter-spacing: .1em;
    text-shadow: 
      -1px -1px 1px #111, 
      2px 2px 1px #363636;
  }
  &.retroshadow {
    color: #2c2c2c;
    background-color: #d5d5d5;
    letter-spacing: .05em;
    text-shadow: 
      4px 4px 0px #d5d5d5, 
      7px 7px 0px rgba(0, 0, 0, 0.2);
  }
}

Gradienten

Beispiel: Gold Text 

h1, h2  {
  color:  #D5AD6D; /*if no support for background-clip*/
  background: 
    -webkit-linear-gradient(transparent, transparent),
    -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, 
    rgba(213,173,109,1) 26%, 
    rgba(226,186,120,1) 35%, 
    rgba(163,126,67,1) 45%, 
    rgba(145,112,59,1) 61%, 
    rgba(213,173,109,1) 100%);
  background: -o-linear-gradient(transparent, transparent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Slash Text

http://codepen.io/robertmesserle/pen/Lebco/ (2016-12)

HTML (jade) 

.slashed
  .top(title='Slashed')
  .bot(title='Slashed')

CSS (stylus) 

@import "nib"

html, body {
  height: 100%;
  overflow: hidden;
}
body {
  transform: rotate(-5deg);
  background: radial-gradient(center, crimson, darken(crimson, 60%));
}
.slashed {
  absolute: top 0 left 0 right 0 bottom 0;
  text-shadow: 3px 3px 3px rgba(black, 0.5);
  .top, .bot {
    text-align: center;
    font: 62px/100px arial;
    text-transform: uppercase;
    text-align: center;
    overflow: hidden;
    color: white;
    &:before {
      content: attr(title);
      transform: rotate(5deg);
    }
  }
  .top {
    absolute: top 0 left 5px right 0 bottom 50%;
    &:before {
      absolute: bottom -50px left 0 right 0;
    }
  }
  .bot {
    absolute: top 50% left 0 right 5px bottom 0;
    &:before {
      absolute: top -50px left 0 right 0;
    }
  }
}

Formulare

Hübsche Selectboxen mit CSS

http://www.htmllion.com/default-select-dropdown-style-just-css.html (2015-13)

The HTML Markup 

<form class="demo">
	<select>
		<option>CSS</option>
		<option>HTML </option>
		<option>HTML 5</option>
	</select>
	<select class="balck">
		<option>CSS</option>
		<option>HTML </option>
		<option>HTML 5</option>
	</select>
	<select class="option3">
		<option>CSS</option>
		<option>HTML </option>
		<option>HTML 5</option>
	</select>
</form>

The CSS 

<style>
	.demo select {
		border: 0 !important;  /*Removes border*/
		-webkit-appearance: none;  /*Removes default chrome and safari style*/
		-moz-appearance: none; /* Removes Default Firefox style*/
		background: #0088cc url(img/select-arrow.png) no-repeat 90% center;
		width: 100px; /*Width of select dropdown to give space for arrow image*/
		text-indent: 0.01px; /* Removes default arrow from firefox*/
		text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
		color: #FFF;
		border-radius: 15px;
		padding: 5px;
		box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
	}
	.demo select.balck {
		background-color: #000;
	}
	.demo select.option3 {
		border-radius: 10px 0;
	}
</style>

Animation mit CSSl

ScrollTop Navigation mit CSS

http://jsfiddle.net/YYPKM/3/ 

<a id="servicios"></a>
    <a id="galeria"></a>
    <a id="contacto"></a>
    <header class="nav">
        <nav>
            <ul>
                <li><a href="#servicios"> Servicios </a> </li>
                <li><a href="#galeria"> Galeria </a> </li>
                <li><a href="#contacto">Contacta  nos </a> </li>
            </ul>
        </nav>
    </header>

    <section id="main">
        <article class="panel" id="servicios">
            <h1> Nuestros Servicios</h1>
        </article>

        <article class="panel" id="galeria">
            <h1> Mustra de nuestro trabajos</h1>
        </article>

        <article class="panel" id="contacto">
            <h1> Pongamonos en contacto</h1>
        </article>
    </section>

/*
 *Styling
 */

html,body {
        width: 100%;
        height: 100%;
        position: relative; 
}
body {
    overflow: hidden;
}

header {
    background: #fff; 
    position: fixed; 
    left: 0; top: 0; 
    width:100%;
    height: 3.5rem;
    z-index: 10; 
}

nav {
    width: 100%;
    padding-top: 0.5rem;
}

nav ul {
    list-style: none;
    width: inherit; 
    margin: 0; 
}


ul li:nth-child( 3n + 1), #main .panel:nth-child( 3n + 1) {
    background: rgb( 0, 180, 255 );
}

ul li:nth-child( 3n + 2), #main .panel:nth-child( 3n + 2) {
    background: rgb( 255, 65, 180 );
}

ul li:nth-child( 3n + 3), #main .panel:nth-child( 3n + 3) {
    background: rgb( 0, 255, 180 );
}

ul li {
    display: inline-block; 
    margin: 0 8px;
    margin: 0 0.5rem;
    padding: 5px 8px;
    padding: 0.3rem 0.5rem;
    border-radius: 2px; 
    line-height: 1.5;
}

ul li a {
    color: #fff;
    text-decoration: none;
}

.panel {
    width: 100%;
    height: 500px;
    z-index:0; 
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}

.panel h1 {
    font-family: sans-serif;
    font-size: 64px;
    font-size: 4rem;
    color: #fff;
    position:relative;
    line-height: 200px;
    top: 33%;
    text-align: center;
    margin: 0;
}

/*
 *Scrolling
 */

a[ id= "servicios" ]:target ~ #main article.panel {
    -webkit-transform: translateY( 0px);
    transform: translateY( 0px );
}

a[ id= "galeria" ]:target ~ #main article.panel {
    -webkit-transform: translateY( -500px );
    transform: translateY( -500px );
}
a[ id= "contacto" ]:target ~ #main article.panel {
    -webkit-transform: translateY( -1000px );
    transform: translateY( -1000px );
}
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=CSS_-_Snippets&oldid=21859“