I am generating some images, without any image.
I am using only css3, techniques
A Pen by J Govind Yeswanth on CodePen.
<head> | |
<link href='http://fonts.googleapis.com/css?family=Bubbler+One' rel='stylesheet' type='text/css'> | |
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'> | |
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:600,700,600italic,700italic' rel='stylesheet' type='text/css'> | |
</head> | |
<body> | |
<div id="left"> | |
</div> | |
<div id="right"> | |
</div> | |
<h3 class="heart_head">Only! CSS...</h3> | |
<div id="drop_water"> | |
</div> | |
<div id="drop_blood"> | |
</div> | |
<div id="exclamatory"> | |
</div> | |
<!-- Triangle demonstration --> | |
<div id="traingle_demonstration"> | |
<h3 class="head">Triangle Using HTML & CSS only</h3> | |
<ol> | |
<li>Define a div block</li> | |
<li>make width and height as '0'</li> | |
<li>give background transparent</li> | |
<li>consider only one border & make other three borders as transparent</li> | |
</ol> | |
<div class="triangle"> | |
<!-- triangle display--> | |
</div> | |
</div> | |
<div id="icons"> | |
<h3 class="OK">'OK' icon</h3> | |
<div class="ok-icon"> | |
<!-- Dispaying OK icon --> | |
</div><!-- ends .ok-icon --> | |
</div><!-- ends #icons --> | |
<div id="button-3d"> | |
<a href="#">Log</a> | |
</div><!-- ends #3d-button --> | |
<a id="creative-link-effects" href="http://tympanus.net/Development/CreativeLinkEffects/">Creative Link Effects</a> | |
<br><br><p>http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-transitions-and-transforms-from-scratch/</p> | |
<p id="textShadow">Hello</p> | |
</body> |
I am generating some images, without any image.
I am using only css3, techniques
A Pen by J Govind Yeswanth on CodePen.
* { | |
margin:0; | |
padding:0; | |
border:none; | |
} | |
body { | |
padding:23px; | |
} | |
h1,h2,h3,h4,h5,h6,ol,ul { | |
margin:2px; | |
padding:0px; | |
font-weight:600; | |
font-family:'Josefin Slab',Raleway,'Bubbler One',calibri,"Segoe UI",Verdana; | |
} | |
a { | |
text-decoration:none; | |
font-family:'Joesfin Slab',Raleway,calibri,sans-serif; | |
color:#000; | |
} | |
#left { | |
width:50px; | |
height:30px; | |
margin-top:25px; | |
position:absolute; | |
display:inline; | |
background:#f00; | |
transform: rotate(45deg); | |
-webkit-transform: rotate(45deg); | |
border-top-left-radius:40px; | |
border-bottom-left-radius:40px; | |
} | |
#right { | |
width:50px; | |
height:30px; | |
margin-top:25px; | |
position:absolute; | |
display:inline; | |
background:#f00; | |
margin-left:14px; | |
transform: rotate(135deg); | |
-webkit-transform: rotate(135deg); | |
border-top-left-radius:40px; | |
border-bottom-left-radius:40px; | |
} | |
h3.heart_head { | |
position:absolute; | |
top:100px; | |
left:14px; | |
color:#09f; | |
display:block; | |
width:95px; | |
background:#950; | |
padding-left:4px; | |
border-radius:150px; | |
} | |
#drop_water { | |
width:30px; | |
height:30px; | |
background:#38f; | |
postion:absolute; | |
margin-left:135px; | |
margin-top:20px; | |
transform: rotate(45deg); | |
-webkit-transform: rotate(45deg); | |
border-top-left-radius:30px; | |
border-top-right-radius:30px; | |
border-bottom-left-radius:30px; | |
} | |
#drop_blood { | |
width:30px; | |
height:30px; | |
background:#904000; | |
postion:absolute; | |
margin-left:135px; | |
margin-top:20px; | |
transform: rotate(45deg); | |
-webkit-transform: rotate(45deg); | |
border-bottom-right-radius:30px; | |
border-top-right-radius:30px; | |
border-bottom-left-radius:30px; | |
} | |
#traingle_demonstration { | |
position:absolute; | |
margin-left:30%; | |
top:8%; | |
} | |
#traingle_demonstration .heading { | |
} | |
#traingle_demonstration ol { | |
font-size:17px; | |
color:#00f; | |
} | |
.triangle { | |
width:0px; | |
height:0px; | |
background:transparent; | |
border:12px solid transparent; | |
border-bottom:12px solid #f00; | |
} | |
#icons { | |
display:inline-block; | |
margin-top:100px; | |
border:2px solid blue; | |
width:80px; | |
} | |
#icons h3.OK { | |
color:red; | |
display:block; | |
} | |
#icons .ok-icon { | |
background:#f60; | |
width:50px; | |
height:50px; | |
margin:13px; | |
border-radius: 10px; | |
background: #ffa230; /* Old browsers */ | |
background: -moz-linear-gradient(top, #ffa230 0%, #ff6100 100%); /* FF3.6+ */ | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa230), color-stop(100%,#ff6100)); /* Chrome,Safari4+ */ | |
background: -webkit-linear-gradient(top, #ffa230 0%,#ff6100 100%); /* Chrome10+,Safari5.1+ */ | |
background: -o-linear-gradient(top, #ffa230 0%,#ff6100 100%); /* Opera 11.10+ */ | |
background: -ms-linear-gradient(top, #ffa230 0%,#ff6100 100%); /* IE10+ */ | |
background: linear-gradient(to bottom, #ffa230 0%,#ff6100 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa230', endColorstr='#ff6100',GradientType=0 ); /* IE6-9 */ | |
-webkit-box-shadow:0px 0px 5px rgba(100, 100, 100, 0.6); | |
-moz-box-shadow:0px 0px 5px rgba(100, 100, 100, 0.6); | |
box-shadow:0px 0px 5px rgba(100, 100, 100, 0.6); | |
} | |
.ok-icon::after { | |
display:inline-block; | |
position:absolute; | |
width:20px; | |
height:6px; | |
background:#fff; | |
content:""; | |
margin-top:22px; | |
margin-left:20px; | |
-webkit-transform: rotate(135deg); | |
transform: rotate(135deg); | |
} | |
.ok-icon::before { | |
display:inline-block; | |
position:absolute; | |
width:13px; | |
height:6px; | |
background:#fff; | |
content:""; | |
margin-top:24px; | |
margin-left:15px; | |
-webkit-transform: rotate(45deg); | |
transform: rotate(45deg); | |
} | |
#button-3d { | |
display:inline-block; | |
box-sizing:border-box; | |
left:180px; | |
border:2px solid transparent; | |
padding:25px; | |
top:250px; | |
position:absolute; | |
} | |
#button-3d a{ | |
text-decoration:none; | |
display:inline-block; | |
box-sizing:border-box; | |
margin:12px; | |
background-color:rgb(56,82,200); | |
padding:15px 50px; | |
color:white; | |
font-family:Raleway,'Bubbler One',sans-serif; | |
font-size:2em; | |
font-weight:300; | |
box-shadow: 1px 0px 1px rgb(32, 56, 145), | |
0px 1px 1px rgb(56, 82, 177),2px 1px 1px rgb(32, 56, 145), | |
1px 2px 1px rgb(56, 82, 177),3px 2px 1px rgb(32, 56, 145), | |
2px 3px 1px rgb(56, 82, 177),4px 3px 1px rgb(32, 56, 145), | |
3px 4px 1px rgb(56, 82, 177),5px 4px 1px rgb(32, 56, 145), | |
4px 5px 1px rgb(56, 82, 177), 6px 5px 1px rgb(32, 56, 145); | |
} | |
#button-3d a:active { | |
font-weight:400; | |
transform:translate(1px,1px); | |
box-shadow: 1px 0px 1px rgb(32, 56, 145), | |
0px 1px 1px rgb(56, 82, 177),2px 1px 1px rgb(32, 56, 145), | |
1px 2px 1px rgb(56, 82, 177),3px 2px 1px rgb(32, 56, 145), | |
2px 3px 1px rgb(56, 82, 177),4px 3px 1px rgb(32, 56, 145), | |
3px 4px 1px rgb(56, 82, 177),5px 4px 1px rgb(32, 56, 145); | |
} | |
#creative-link-effects{ | |
position:relative; | |
display:block; | |
margin-top:75px; | |
width:180px; | |
padding-bottom:2px; | |
margin-left:20px; | |
} | |
#creative-link-effects:before { | |
content:">> "; | |
position:absolute; | |
left:-20px; | |
} | |
#creative-link-effects:after { | |
content:""; | |
position:absolute; | |
width:20%; | |
background:#aaa; | |
height:1px; | |
left:0px; | |
bottom:0px; | |
} | |
#creative-link-effects:hover { | |
font-weight:bold; | |
transition:font-weight 100ms linear; | |
} | |
#creative-link-effects:hover:after { | |
width:30%; | |
transition:width 500ms linear; | |
} | |
#creative-link-effects:hover:before { | |
transform:translate(2px,0) scale(0.8); | |
transition:transform 200ms linear; | |
} | |
#textShadow { | |
margin-top:25px; | |
font-size:6em; | |
background-color:#ccc; | |
width:232px; | |
padding:2px; | |
border:1px solid #aaa; | |
background-clip:content-box; | |
color:#fff; | |
text-shadow:2px 3px 1px rgba(0,0,0,0.4); | |
font-family:'Joesfin Slab',Raleway,calibri,sans-serif; | |
font-weight:200; | |
} | |
#textShadow:hover { | |
font-weight:300; | |
transition:font-weight 200ms linear; | |
} |