Skip to content

Instantly share code, notes, and snippets.

View owngeek's full-sized avatar

owngeek owngeek

View GitHub Profile
@owngeek
owngeek / Checkbox_Styling.css
Created September 20, 2016 07:29
Checkbox Styling
<style>
body {
background: #d2d9ca;
}
h1 {
color: #eee;
font: 30px Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow: 0px 1px black;
@owngeek
owngeek / MixItUp.css
Created September 7, 2016 15:42
MixItUp
<style>
.vv{ width:500px; background-color:#9C6; overflow:hidden;}
.mix{ width:100px; height:100px; background-color:#C30; float:left; margin:10px;}
.mix{
display: none;
}
</style>
@owngeek
owngeek / pure_css_tab.css
Created September 7, 2016 14:24
Pure css tab
<style>
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@owngeek
owngeek / jquery_animation.css
Last active September 7, 2016 14:10
Jquery Animation
<style>
.btn{width:100px; height:50px; background-color:#309; color:#fff; margin-bottom:20px;}
.div1{background:#FF0000;height:50px;width:50px;position:absolute;}
.div2{background:#CC0066;height:50px;width:50px;position:absolute; top:20%;}
.div3{background:#0066FF;height:50px;width:50px;position:absolute; top:30%;}
</style>
@owngeek
owngeek / masonry_css
Created September 7, 2016 13:23
masonry_layout
<style>
* {
box-sizing: border-box;
}
.container {
background: #EEE;
width: 50%;
margin-bottom: 20px;
}
@owngeek
owngeek / html5_tag
Created September 7, 2016 10:21
html5_tag
Tag Description
<article> Defines an article in the document
<aside> Defines content aside from the page content
<bdi> Defines a part of text that might be formatted in a different direction from other text
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for the document or a section
<header> Defines a header for the document or a section
@owngeek
owngeek / html5_video.html
Last active September 7, 2016 11:38
html5_video.html
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
</video>
<!--html_youtube_videos-->
<iframe width="420" height="345" src="https://www.youtube.com/embed/TsV4Cg-4KsE?autoplay=1">
@owngeek
owngeek / css3_keyframe.css
Last active August 31, 2016 11:40
<style>
div {
width: 100px;
height: 100px;
background-color: #990;
position: absolute;
left: 0;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: example;
@owngeek
owngeek / hover.css
Last active August 31, 2016 12:24
<style>
.rollover figure {
position: relative;
overflow: hidden;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.rollover figure figcaption {
@owngeek
owngeek / div_center.css
Last active August 31, 2016 09:26
<style>
.title{ width:100%; float:left; color:#fbfbfb; font-size:16px; margin-left:25px; font-family:"Arial Black", Gadget, sans-serif}
/*-----Both Horizontally and Vertically--------*/
.wrpr{background-color: #999999; position:relative; height:500px; width:500px; float:left;}
.centre{ width:200px; height:200px; background-color:#C30; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}
/*-----Both Horizontally and Vertically--------*/
/*-----one element in horizontaly centre --------*/
.wrpr2{background-color: #999900; height:500px; width:500px; margin:0; float:left; }