CSS - Snippets: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(17 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
−
== Diverse CSS Snippets ==
+
Siehe auch [[CSS - Baukasten]] (alt)
−
[[CSS - Stitched Look - aufgenäht]]
+
 
 +
== Links ==
 +
htmllion.com - scheint eine gute Seite für alles mögliche zu sein
 +
 
 +
== CSS - Animation ==
 +
[[Animation im Web]]
  
−
[[CSS - bildschirmfüllendes Hintergrundbild]]
+
[[CSS Transitions]]
  
−
[[CSS - Mehr Raum bei Anchor-Sprüngen]]
+
[[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 ==
 
== Fixes Seitenlayout "springt" wegen Scrollbalken ==
Zeile 41: Zeile 53:
 
Die Werte bezeichnen: Versatz in x-Richtung, y-Richtung, den Wert für das Weichzeichnen und natürlich die Schattenfarbe.
 
Die Werte bezeichnen: Versatz in x-Richtung, y-Richtung, den Wert für das Weichzeichnen und natürlich die Schattenfarbe.
  
−
'''Schatten auf alten IE'''
+
 
 +
'''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.
 
Mit Microsoft Filter Funktionen. Es gibt zwei unterschiedliche Schatten Filter. Beide liefern ein eher mäßiges Ergebnis.
  
Zeile 55: Zeile 68:
 
}
 
}
 
</pre>
 
</pre>
 +
 +
== 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
 +
<pre>
 +
<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>
 +
</pre>
 +
The CSS
 +
<pre>
 +
<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>
 +
</pre>
 +
 +
== Animation mit CSS ==
 +
siehe auch [[Animation im Web]]
 +
=== ScrollTop Navigation mit CSS ===
 +
http://jsfiddle.net/YYPKM/3/
 +
<syntaxhighlight lang="html5">
 +
<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>
 +
 +
</syntaxhighlight>
 +
<syntaxhighlight lang="css">
 +
/*
 +
*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 );
 +
}
 +
 +
</syntaxhighlight>
 +
 +
 +
== Custom Cursor ==
 +
<syntaxhighlight lang="css">
 +
.left-arrow {
 +
  cursor: url(../images/s_left.gif), w-resize;
 +
  width: 50%;
 +
}
 +
.right-arrow {
 +
  cursor: url(../images/s_right.gif), e-resize;
 +
  width: 50%;
 +
}
 +
</syntaxhighlight>

Aktuelle Version vom 29. November 2024, 07:29 Uhr

Siehe auch CSS - Baukasten (alt)

Links[Bearbeiten]

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

CSS - Animation[Bearbeiten]

Animation im Web

CSS Transitions

CSS - Animation

Diverse CSS Snippets[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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

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

Schatten[Bearbeiten]

.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[Bearbeiten]

CSS - Texteffekte

Formulare[Bearbeiten]

Hübsche Selectboxen mit CSS[Bearbeiten]

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[Bearbeiten]

siehe auch Animation im Web

ScrollTop Navigation mit CSS[Bearbeiten]

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[Bearbeiten]

.left-arrow {
  cursor: url(../images/s_left.gif), w-resize;
  width: 50%;
}
.right-arrow {
  cursor: url(../images/s_right.gif), e-resize;
  width: 50%;
}
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=CSS_-_Snippets&oldid=27246“