CSS toolbox

Egy CSS toolbox létrehozását tervezem már régóta, amihez már elég sok anyagot kaptam/írtam, ha úgy gondoljátok hogy ti is küldenétek be írjatok bátran a [email protected] címre. Akkor a szöveg helyet lássuk a toolbox jelenleg publikálhatónak ítélt részét.

1. CSS Iniciálé

css-iniciale

CSS iniciálé


<!DOCTYPE html>
<html>
<head>
<title>CSS Iniciálé</title>
<style>
.firstcharacter { float: left; color: #903; font-size: 70px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }</style>
</head>
<body>
<p><span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.</p>
</body>

</html>

Demó

Update! B változat (az egyszerűbb).


<!DOCTYPE html>
<html>
<head>
<title>CSS Iniciálé First-letter</title>
<style>
p::first-letter { float: left; color: #903; font-size: 70px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.</p>
</body>
</html>

2. CSS Dobozok

css-dobozok

CSS dobozok

<!DOCTYPE html>
<html>

<head>
<title>CSS dobozok</title>
<style>
body{
 background:#999 ;
}
ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
}

ul.box li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}

ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg);
}

ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg);
}
</style>
</head>
<body>
<ul class="box">
 <li>doboz1</li>
 <li>doboz2</li>
 <li>doboz3</li>
 <li>doboz4</li>
</ul>

</body>

</html>

Demó

3. CSS Center Div – Auto magasság


<!DOCTYPE html>
<html>

<head>
<title>CSS Center Div - Auto magasság</title>
<style>
* {
margin: 0;
padding: 0;
}

#page{
display:table;
overflow:hidden;
margin:0px auto;
}

*:first-child+html #page {
position:relative;
}/*ie7*/

* html #page{
position:relative;
}/*ie6*/

#content_container{
display:table-cell;
vertical-align: middle;
}

*:first-child+html #content_container{
position:absolute;
top:50%;
}/*ie7*/

* html #content_container{
position:absolute;
top:50%;
}/*ie6*/

*:first-child+html #content{
position:relative;
top:-50%;
}/*ie7*/

* html #content{
position:relative;
top:-50%;
}/*ie6*/

html,body{
height:100%;
}

#page{
height:100%;
width:465px;
}
</style>
</head>

<body>
<div id="page">
 <div id="content_container">
 <div id="content">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 </div>
 </div>
</div>
</body>

</html>

Demó

4. CSS blockquote

css-blockquote

CSS blockquote

<!DOCTYPE html>
<html>

<head>
<title>CSS blockquote</title>
<style>
blockquote {
 background: #f9f9f9;
 border-left: 10px solid #ccc;
 margin: 1.5em 10px;
 padding: 0.5em 10px;
 quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
 color: #ccc;
 content: open-quote;
 font-size: 4em;
 line-height: 0.1em;
 margin-right: 0.25em;
 vertical-align: -0.4em;
}
blockquote p {
 display: inline;
}
</style>
</head>

<body>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
</blockquote>
</body>

</html>

Demó

5. CSS div sarok szalag

css-div-szalag

CSS div szalag

<!DOCTYPE html>
<html>

<head>
<title>CSS szalag</title>
<style>
.wrapper {
 margin: 50px auto;
 width: 280px;
 height: 370px;
 background: white;
 border-radius: 10px;
 -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
 -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
 box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
 position: relative;
 z-index: 90;
}

.ribbon-wrapper-green {
 width: 85px;
 height: 88px;
 overflow: hidden;
 position: absolute;
 top: -3px;
 right: -3px;
}

.ribbon-green {
 font: bold 15px Sans-Serif;
 color: #333;
 text-align: center;
 text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 position: relative;
 padding: 7px 0;
 left: -5px;
 top: 15px;
 width: 120px;
 background-color: #BFDC7A;
 color: #6a6340;
 box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
 background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
}

.ribbon-green:before, .ribbon-green:after {
 content: "";
 border-top: 3px solid #6e8900;
 border-left: 3px solid transparent;
 border-right: 3px solid transparent;
 position:absolute;
 bottom: -3px;
}

.ribbon-green:before {
 left: 0;
}
.ribbon-green:after {
 right: 0;
}
</style>
</head>

<body>
<div class="wrapper">
 <div class="ribbon-wrapper-green"><div class="ribbon-green">HTML5</div></div>
</div>
</body>
</html>

Demó

6. CSS lapfülek

css-lapfulek

CSS lapfülek

<!DOCTYPE html>
<html>

<head>
<title>CSS sarok trükk</title>
<style>
body {
 background: #e6e6e6;
}
.sarok {
 background: #f6f6f6;
 height: 600px;
 margin: 50px auto;
 max-width: 600px;
 width: 80%;
 position: relative;
 -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.3);
 -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.3);
 box-shadow: 0 1px 7px hsla(0,0%,0%,.3);
}
/* Corner Effect */
.sarok:after,
.sarok:before {
 background: #e6e6e6;
 content: '';
 height: 50px;
 top: -25px;
 width: 100px;
 position: absolute;
 -webkit-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.6);
 -moz-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.6);
 box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.6);
}
.sarok:after {
 left: -50px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
.sarok:before {
 right: -50px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
}
.sarok p{
 margin-left: 100px;
}
</style>
</head>

<body>
<div class="sarok">
<p>Ide jön a tartalom</p>
</div>
</body>

</html>

Demó

7. CSS átlátszó háttér

atlatszo-hatter

Átlátszó háttér

<!DOCTYPE html>
<html>

<head>
<title>Atlatszó háttér</title>
<style>
div {
 width: 200px;
 height: 200px;
 display: block;
 position: relative;
}

div::after {
 content: "";
 background: url(atlatszo.jpg);
 opacity: 0.5;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 position: absolute;
 z-index: -1;
}
</style>
</head>

<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>

</html>

Demó

8. CSS Papírkupac

papirkupac

Papírkupac

<!DOCTYPE html>
<html>

<head>
<title>CSS papírlapok</title>
<style>
/* Layered Paper */
body {
 padding: 30px;
}
.layered-paper {
 background: #eee;
 width:350px;
 box-shadow:
 0 1px 1px rgba(0,0,0,0.15), /* The top layer shadow */
 0 10px 0 -5px #eee, /* The second layer */
 0 10px 1px -4px rgba(0,0,0,0.15), /* The second layer shadow */
 0 20px 0 -10px #eee, /* The third layer */
 0 20px 1px -9px rgba(0,0,0,0.15); /* The third layer shadow */
 padding: 30px;
}
</style>
</head>
<body>
<div class="layered-paper">
 ÜDVÖZLET!
</div></body>

</html>

Demó

9. CSS táblázat, színes sorok

tabla-szines-sorok

Színes táblasorok

<!DOCTYPE html>
<html>
<head>
<title>css tábla sor-színek</title>
<style>
tbody tr:nth-child(odd) {
 background-color: lime;
}
</style>
</head>

<body>
<table cellpadding="0" cellspacing="0" width="100px">
<tr>
 <td>Text</td>

</tr>
<tr>
 <td>Text</td>

</tr>
<tr>
 <td>Text</td>

</tr>
<tr>
 <td>Text</td>

</tr>
<tr>
 <td>Text</td>

</tr>
<tr>
 <td>Text</td>

</tr>
</table>
</body>
</html>

Demó

10. Google Font import


<!DOCTYPE html>
<html>

<head>
<title>Google Font Ügyesen</title>

<style>
@import url(https://fonts.googleapis.com/css?family=Averia+Sans+Libre:400,300italic,700);
h1.fontface {
font: 60px/68px 'Averia Sans Libre', Arial, sans-serif;
letter-spacing: 0;
}
p {
font: 18px/27px 'Averia Sans Libre', Arial, sans-serif;
}
#container {
width: 900px;
margin: 0 auto;
}
</style>
</head>

<body>
<div id="container">
<h1 class="fontface">Ez bizony egy <a href="https://www.google.com/fonts">fonts google</a> demo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
</div>
</body>
</html>

Demó

11. CSS hasábok

<!DOCTYPE html>
<html>

<head>
<title>CSS hasábok</title>
<style>
.three-col {
 -moz-column-count: 3;
 -moz-column-gap: 20px;
 -webkit-column-count: 3;
 -webkit-column-gap : 20px;
 -moz-column-rule-color: #ccc;
 -moz-column-rule-style: solid;
 -moz-column-rule-width: 1px;
 -webkit-column-rule-color: #ccc;
 -webkit-column-rule-style: solid ;
 -webkit-column-rule-width: 1px;
}
</style>
</head>
<body>
<p class="three-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>

</html>

Demó

12. CSS Text-Shadow

css-text-shadow

Text Shadow

<!DOCTYPE html>
<html>

<head>
<title>text shadow</title>
<style>
.shadow{
background:#e4e4c7;
padding:10px 10px 20px 10px; /*padding az eltoláshoz*/
font-size:4.2em;
letter-spacing:.2em;
font-weight:bold;
color:#526972;
/*egyik árnéyk a háttérhez, a második a szöveg*/
text-shadow: 4px 4px 0px #e4e4c7, 6px 6px 0px #526972;}
</style>
</head>

<body>
<div class="shadow">TEXT SHADOW DEMO</div>
</body>

</html>

Demó

13. Placeholder stílusa

<!DOCTYPE html>
<html>
<head>
<title>placeholder style</title>
<style>
::-webkit-input-placeholder {
 color: red;
}
:-moz-placeholder { /* Firefox 18- */
 color: red;
}
::-moz-placeholder { /* Firefox 19+ */
 color: red;
}
:-ms-input-placeholder {
 color: red;
}
</style>
</head>

<body>
<input id="test" placeholder="Placeholder text!">
</body>
</html>

Demó

14. CSS Háromszög listajel

css-haromszog-listajel

Háromszög listajel

<!DOCTYPE html>
<html>

<head>
<title>Háromszög listajel</title>
<style>
ul {
 margin: 0.75em 0;
 padding: 0 1em;
 list-style: none;
}
li:before {
 content: "";
 border-color: transparent #111;
 border-style: solid;
 border-width: 0.35em 0 0.35em 0.45em;
 display: block;
 height: 0;
 width: 0;
 left: -1em;
 top: 0.9em;
 position: relative;
}
</style>
</head>

<body>
<ul>
 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
 <li>Aliquam tincidunt mauris eu risus.</li>
 <li>Vestibulum auctor dapibus neque.</li>
</ul>
</body>

</html>

Demó

15. CSS Loader

css-loader

CSS loader

<!DOCTYPE html>
<html>

<head>
<title>CSS animált loader</title>
<style>
.loader {
 text-align: center;
}
.loader span {
 display: inline-block;
 vertical-align: middle;
 width: 10px;
 height: 10px;
 margin: 50px auto;
 background: black;
 border-radius: 50px;
 -webkit-animation: loader 0.9s infinite alternate;
 -moz-animation: loader 0.9s infinite alternate;
}
.loader span:nth-of-type(2) {
 -webkit-animation-delay: 0.3s;
 -moz-animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
 -webkit-animation-delay: 0.6s;
 -moz-animation-delay: 0.6s;
}
@-webkit-keyframes loader {
 0% {
 width: 10px;
 height: 10px;
 opacity: 0.9;
 -webkit-transform: translateY(0);
 }
 100% {
 width: 24px;
 height: 24px;
 opacity: 0.1;
 -webkit-transform: translateY(-21px);
 }
}
@-moz-keyframes loader {
 0% {
 width: 10px;
 height: 10px;
 opacity: 0.9;
 -moz-transform: translateY(0);
 }
 100% {
 width: 24px;
 height: 24px;
 opacity: 0.1;
 -moz-transform: translateY(-21px);
 }
}
</style>
</head>

<body>
<div class="loader">
 <span></span>
 <span></span>
 <span></span>
</div>
</body>

</html>

Demó

16. CSS Media Types

<link rel="stylesheet" type="text/css" href="print.css" media="print">

all – Used for all media type devices
aural – Used for speech and sound synthesizers
braille – Used for braille tactile feedback devices
embossed – Used for paged braille printers
handheld – Used for small or handheld devices
print – Used for printers
projection – Used for projected presentations, like slides
screen – Used for computer screens
tty – Used for media using a fixed-pitch character grid, like teletypes and terminals
tv – Used for television-type devices

17. Font stack

/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

Folytatása következik.