CSS - Snippets

Siehe auch CSS - Baukasten (alt)

Links

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

CSS - Animation

Animation im Web

CSS Transitions

CSS - Animation

Diverse CSS Snippets

CSS - ClipPath
CSS - Grid 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

CSS - Texteffekte

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 CSS

siehe auch Animation im Web

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 );
}

Custom Cursor

.left-arrow {
  cursor: url(../images/s_left.gif), w-resize;
  width: 50%;
}
.right-arrow {
  cursor: url(../images/s_right.gif), e-resize;
  width: 50%;
}