Skip to content

Instantly share code, notes, and snippets.

@Yeswanth-JG

Yeswanth-JG/No-images.markdown

Created October 7, 2013 12:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Yeswanth-JG/6867067 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Yeswanth-JG/6867067 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by J Govind Yeswanth.
Raw
index.html
<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>
Raw
No-images.markdown
Raw
style.css
* {
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment