Archiv

CSS perspektive

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>CSS3 Ribbon</title>
    <style type="text/css">
		@font-face {
			font-family: 'LeagueGothicRegular';
			src: url('fonts/league_gothic-webfont.eot');
			src: local('☺'), 
				 url('fonts/league_gothic-webfont.woff') format('woff'), 
				 url('fonts/league_gothic-webfont.ttf') format('truetype'), 
				 url('fonts/league_gothic-webfont.svg#webfontekMB1SFV') format('svg');
			font-weight: normal;
			font-style: normal;
		}
		* {
			margin: 0;
			padding: 0;
			border: 0;
			outline: 0;
			font-size: 100%;
			vertical-align: baseline;
			background: transparent;
		}
		html {
			background: #ede5d8;	
		}
		body {
			line-height: 1;
		}
		ol,ul {
			list-style: none;
		}
		:focus {
			outline: 0;
		}				
		#wrapper {
			display:block;
			padding:5% 0;
		}
		#content {
			display:block;
			margin: 0 auto;
			padding:0 0 80px 0;
			width: 80%;
			height:auto;
			background:#99cccc;
			-moz-box-shadow: 0 0 4px rgba(160,128,73,0.50);
			-khtml-box-shadow: 0 0 4px rgba(160,128,73,0.50);
			-webkit-box-shadow: 0 0 4px rgba(160,128,73,0.50);	
		}
		.ribbon {
			float: left;
			position: relative;
			height: 65px;
			width: auto;
			left:-15px;
			top: 30px;
			background: #336666;
			-moz-box-shadow: 4px 4px 0 rgba(160,128,73,0.20);
			-khtml-box-shadow: 4px 4px 0 rgba(160,128,73,0.20);
			-webkit-box-shadow: 4px 4px 0 rgba(160,128,73,0.20);
			z-index: 100;
		}		
		.ribbon h2 {
			display:block;
			padding:0 20px 0 80px;
			color:#fffdf9;
			font: normal normal 2.8em/68px 'LeagueGothicRegular', sans-serif;
			font-size-adjust: 0.55;
			text-transform:uppercase;
			text-align: right;
		}
		.triangle {
			position: relative;
			height:0;
			width:0;
			left: -35px;
			top: 75px;
			border-style:solid;
			border-width:20px;
			border-color: transparent #336666 transparent transparent;
			z-index: -1;
		}
		p {
			padding:80px 70px 0 70px;
			font:italic normal 15px/22px Georgia, "Times New Roman", Times, serif;
			color:#938462;
		}
	</style>
    </head>
    <body>
        <div id="wrapper">
            <div id="content">
                <div class="ribbon">
                	<h2>CSS3 Ribbon</h2>
                </div>
                <div class="triangle"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec magna egestas dui faucibus auctor at at ante. Nam sed mauris ac massa dictum commodo. In auctor elementum sem eu cursus. Cras tortor dolor, euismod sed fermentum a, aliquam vitae erat. Praesent dictum lobortis sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce quam dui, bibendum sed aliquet auctor, interdum id ligula. Suspendisse aliquet dignissim lacus, a laoreet odio imperdiet vitae. Cras interdum faucibus lorem at porttitor. Praesent congue nulla sed diam consequat viverra non in nunc. Morbi quis nunc eu odio feugiat tincidunt ac tempor dolor. Suspendisse potenti. Aenean id bibendum erat. Curabitur lacinia molestie placerat. Sed interdum odio ut quam feugiat interdum. Morbi et porttitor elit. Integer a tortor metus, et bibendum nisl. Nulla posuere luctus purus, non feugiat velit laoreet vitae. Nulla a nibh vel nibh fermentum cursus.</p>
            </div>
        </div>
    </body>
</html>

css-ribbon

Um Texte, wie z.B. Links oder Überschriften vom Hintergrund eindrucksvoll abzuheben, kann man Ihr auch mit CSS einen Schein nach außen verleihen

Die Schrift bekommt einen Schein nach außen. Damit dieser deutlicher wird, ist noch die graue Hintergrundfarbe eingefügt.

Schattenspiel: Schein nach außen


<span style=“text-shadow:1px 1px 1px #EECAAE;background-color:black;“>Schattenspiel: Schein nach außen</span>

weiteres gibt es hier:

http://www.webmasterpro.de/coding/article/css3-buttons-erstellen.html

Man kann diesen Schatten mit CSS3 auch auf einen Block, einen DIV- Container anwenden

-moz-box-shadow: 8px 8px 4px black;
-khtml-box-shadow: 8px 8px 4px black;
-webkit-box-shadow: 8px 8px 4px black;

Schatten oder Schein nach außen für Schriften

Um Texte, wie z.B. Links oder Überschriften vom Hintergrund eindrucksvoll abzuheben, kann man Ihr auch mit CSS einen Schein nach außen verleihen

Schattenspiel: Schein nach außen

<h1><span style=“text-shadow:0 1px 1px #EECAAE;background-color:grey;“>Schattenspiel: Schein nach außen</span></h1>

Die Schrift bekommt einen Schein nach außen. Damit dieser deutlicher wird, ist noch die graue Hintergrundfarbe eingefügt.

http://www.selfhtml5.org/2012-css3/10-praktische-css3-div-boxen-designs/

Spieltest mit Pfeil, Perspektive

erster Test

zweiter Test

<div style=“
position: relative;
height:0px;
width:0px;
left: 35px;
top: 75px;
border-style:solid;
border-width:100px;
border-color: transparent #8f191c transparent transparent;
z-index: -1;“>erster Test</div>

<div style=“
position: relative;
height:100px;
width:0px;
left: 35px;
top: 75px;
border-style:solid;
border-width:100px;
border-color: transparent #8f191c transparent transparent;
z-index: -1;padding:5em;“>zweiter Test</div>