CSS JQuery: September 2014

Tuesday, September 30, 2014

CSS Folding Paper Like Menu.

<style type="text/css">

ul,li{
margin: 0;
padding: 0;
}

.main{
position:absolute;
z-index:1;
}

.main li{
list-style:none;
background: #9b59b6;
width:100px;
padding: 0 5px;
border: 1px solid black;
height: 30px;
line-height: 30px;
-webkit-transition: all .5s ease-in-out;
}

.main li:nth-child(odd){
-webkit-transform-origin: top;
-webkit-transform: perspective(350px) rotateX(-90deg);
}

.main li:nth-child(even){
margin-top:-65px;
-webkit-transform-origin: bottom;
-webkit-transform: perspective(350px) rotateX(90deg);
}

.hov:hover li:nth-child(odd){
-webkit-transform-origin: top;
-webkit-transform: perspective(30px) rotateX(0deg);
margin-top:0;
}

.hov:hover li:nth-child(even){
-webkit-transform-origin: bottom;
-webkit-transform: perspective(30px) rotateX(0deg);
margin-top:0;
}

.main li:first-child{
margin-top:0;
}

.hov{
position:relative;
height: 40px;
width:112px;
background: #2ecc71;
color: white;
font-size: 13px;
font-family: Helvetica;
font-weight:bold;
text-align: center;
line-height: 40px;
list-style:none;
z-index:2;
}

</style>

<nav>
<li class="hov">Hover Me!
<ul class="main">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</li>
</nav>

Output :)

1)

Monday, September 29, 2014

CSS3 fold and unfold effect.

<style type="text/css">

body {
padding: 50px;
font-family: Arial, sans-serif;
}

#folder {
width: 300px;
padding: 10px;
}

.fold {
background: -webkit-linear-gradient(top, #e5e5e5, #ccc);
background: -moz-linera-gradient(top, #e5e5e5, #ccc);
padding: 10px;
width: 280px;
height: 80px;
color: #999;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}

#toggle { display: none; }

#toggle-label {
display: inline-block;
cursor: pointer;
margin-bottom: 50px;
border: 1px solid #e5e5e5;
font-size: 11px;
color: #999;
background: #fff;
text-transform: uppercase;
border-radius: 5px;
padding: 5px;
}

#toggle:checked ~ .fold:nth-child(odd) {
margin-top: -82px;
-webkit-transform: perspective(800px) rotateX(-80deg);
-moz-transform: perspective(800px) rotateX(-80deg);
transform: perspective(800px) rotateX(-80deg);
}

#toggle:checked ~ .fold:nth-child(even) {
margin-top: -84px;
-webkit-transform: perspective(800px) rotateX(80deg);
-moz-transform: perspective(800px) rotateX(80deg);
transform: perspective(800px) rotateX(80deg);
}

</style>

<div id="folder">

<input type="checkbox" id="toggle"/> <label for="toggle" id="toggle-label">fold/unfold</label>

<div class="fold">
Element 1
</div>
<div class="fold">
Element 2
</div>
<div class="fold">
Element 3
</div>
<div class="fold">
Element 4
</div>
<div class="fold">
Element 5
</div>

</div>

Output :)

1)

Saturday, September 27, 2014

CSS Hover attribute reveal non-div element.

<style type="text/css">

span {
display: none;
font-size: 25px;
color: #321321;
}
.something1:hover ~ [class*="text"] {
display: block;
}

</style>

<div class="container">

<h2 class="something1">Hover on Me</h4>

<span class="text1">MaHi</span>
<span class="text2">MaHii</span>
<span class="text3">MaHiii</span>
<span class="text4">MaHiiii</span>

</div>

Output :)

1)

Friday, September 26, 2014

Place a checkbox within a button.

First you need some basic knowledge about jQuery. Please visit http://jquery.com/ for some guidance.

Example :)

<html>
<head>
<title>MaHi CSS Tution</title>

<style type="text/css">
#container{
padding:50px;
}
#btnOuterDIV{
height:30px;
width:80px;
border:1px solid #ccc;
border-radius:5px;
}
#btnOuterDIV:hover{
border-color:#888;
overflow:hidden;
cursor:pointer;
}
#btnChkbox{
height:15px;
width:15px;
float:left;
padding-top:5px;
padding-left:5px;
}
#btnLabel{
height:70%;
width:60%;
font-size:10px;
float:left;
padding-top:10px;
padding-left:5px;
}
#btnLabel:hover{
color:blue;
}
</style>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

</head>

<body>
<div id="container">
<div id="btnOuterDIV">
<div id="btnChkbox">
<input type="checkbox" id="btnCB" />
</div>
<div id="btnLabel">
Click Me
</div>
</div>
</div>

<script type="text/javascript">
$(function(){
$('#btnOuterDIV').click(function(){
alert('You clicked the button');
$('#btnCB').prop('checked',true);
});
});
</script>

</body>
</html>

Output :)

1)

Thursday, September 25, 2014

Making text appear when hovering over an image.

Wednesday, September 24, 2014

CSS Show rounded labels.

Note : This is not image. it is Text. I want to show rounded label on the top right corner of Image.

Example :)

Output :)

Tuesday, September 23, 2014

How to equally distribute floated divs?

<title>Mahi CSS Tution</title>

<style type="text/css">
.container{
font-size:0;
text-align:justify
}

.container::after{
width: 100%;
display: inline-block;
content: "";
visibility: hidden;
}

.box{
margin:20px;
width:50px;
height:50px;
background:green;
display:inline-block
}

/*Div 2 - the box-container is so you can see the effect*/

.container1{
display:table;
text-align:middle;
width:100%
}

.box-container{
display:table-cell;
width:25%;
}

.box1{
width:50px;
height:50px;
background:blue;
margin:0 auto
}
</style>


<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

<hr/>



<div class="container1">

<div class="box-container">
<div class="box1"></div>
</div>

<div class="box-container">
<div class="box1"></div>
</div>

<div class="box-container">
<div class="box1"></div>
</div>

<div class="box-container">
<div class="box1"></div>
</div>

</div>

Output :)

How to word wrap text if the image is on the right/left ?

Monday, September 22, 2014

How to float one div and stack two divs?

Sunday, September 21, 2014

Increase div width according to the text inside it.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.messages {
display: table;
max-width:50%;
min-width:150px;
background: #ffeec0;
padding:2px;
margin:3px;
-webkit-border-radius: 2px;
border-radius: 2px;
border:1px solid #ffdd7c;
}
</style>
</head>
<body>
<div class="messages">
MaHiiiiiiiiiiiiiiiiiiiiiiiiiiii
</div>
MaHiiiiiiiiii Mahiii mabghvdsjbvfcnxb jhdsvdbvjhsd dsksjgvjhsvsnccsvsdvsv
acsddvsvsbdbdfbgfnf mahiiiiiiii MaHiiiiiiiiii mahiiiiiiiiiiiii
</body>
</html>

Output :)

Saturday, September 20, 2014

Static/Fixed Sidebar and Fluid Content.

I have three DIVs, one is the header at the top which should be fixed (should not scroll), width 100%, height 50px; another is a sidebar to the left which needs to be 100% of browser's height, fixed width of 200px and another DIV for the main content to the right which will be fluid in width, that is 100% of the remaining width (total minus 200px).

Example :)

<style type="text/css">
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html, body {
height:100%;
margin:0;
}
#header {
width: 100%;
height: 50px;
background-color: red;
position: fixed;
z-index:999;
}
#parent {
width:100%;
height:100%;
}
#sidebar {
padding-top:50px;
/* padding-top must be the same as header height */
width:200px;
height:100%;
background-color: blue;
box-sizing:border-box;
position: fixed;
z-index:99;
}
#main-content {
position: relative;
width: 100%;
padding-left:200px;
/* padding-left must be the same as sidebar width */
height: auto;
/* This could be anything, content should scroll vertical */
background: green;
box-sizing:border-box;
padding-top: 50px;
/* padding-top must be the same as header height */
}
#test {
height: 1200px;
background: black;
width:50px;
}
</style>

<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content">
<div id="test"></div>
</div>

</div>

Output :)

Friday, September 19, 2014

Align the numbers in the list to be aligned towards right

Wednesday, September 17, 2014

How to hide dynamic content if it's width is greater than screen width?

//You must have some basic knowledge about JQuery :P

<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
#header-top {
float: left;
width: 100%;
padding-top: 5px;
}

#header-top-inner {
display: inline-block;
width:200px;
}

#logo-image, #logo-image img {
float: left;
width: 800px;
}

#logo-content {
float: left;
}
</style>
</head>
<body>
<div id="header-top">
<div id="header-top-inner">
<div id="logo-image">
<a href="#"><img src="logo.png"/></a> // I suggest you to take wide image here
</div>
<div id="logo-content">
<h1>Text here, Text here, Text here</h1>
<h2>Text here</h2>
</div>
</div>
</div>
<script type="text/javascript">
updateLayout();
$(window).on('resize', updateLayout);
function updateLayout() {
//Hide header image on smaller screens
if ($(window).width() <= $('#logo-image').width()) {
document.getElementById('logo-image').style.display = 'none';
} else {
document.getElementById('logo-image').style.display = 'block';
}
}
</script>
</body>
</html>

Output :)

Screen 1 :)

Screen 2 :)

Monday, September 15, 2014

Awesome example of Keyframes animation :)

HTML :)

<div class="container">
<ul>
<li><a href="#">
<img src="df.png" alt="one" />
<h5>This is heading</h5>
</a></li>

<li><a href="#">
<img src="prf.jpg" alt="one" />
<h5>This is heading</h5>
</a></li>

<li><a href="#">
<img src="avtar.png" alt="one" />
<h5>This is heading</h5>
</a></li>

<li><a href="#">
<img src="avtar2.png" alt="one" />
<h5>This is heading</h5>
</a></li>

<li><a href="#">
<img src="ad2lanc.png" alt="one" />
<h5>This is heading</h5>
</a></li>
</ul>
</div>

CSS :)

.container {
width:200px;
margin:0px auto;
overflow:hidden;
}
.container ul {
width:1000px;
list-style:none;
position:relative;
-webkit-animation: slide 20s infinite;
-moz-animation: slide 20s infinite;
-ms-animation: slide 20s infinite;
-o-animation: slide 20s infinite;
animation: slide 20s infinite;
}

@-webkit-keyframes slide {
10% {
left:0px;
}
15%,30% {
left:-200px;
}
35%,50% {
left:-400px;
}
55%,70% {
left:-600px;
}
75%,90% {
left:-800px;
}
}

@-moz-keyframes slide {
10% {
left:0px;
}
15%,30% {
left:-200px;
}
35%,50% {
left:-400px;
}
55%,70% {
left:-600px;
}
75%,90% {
left:-800px;
}
}

@-ms-keyframes slide {
10% {
left:0px;
}
15%,30% {
left:-200px;
}
35%,50% {
left:-400px;
}
55%,70% {
left:-600px;
}
75%,90% {
left:-800px;
}
}

@-o-keyframes slide {
10% {
left:0px;
}
15%,30% {
left:-200px;
}
35%,50% {
left:-400px;
}
55%,70% {
left:-600px;
}
75%,90% {
left:-800px;
}
}

@keyframes slide {
10% {
left:0px;
}
15%,30% {
left:-200px;
}
35%,50% {
left:-400px;
}
55%,70% {
left:-600px;
}
75%,90% {
left:-800px;
}
}

ul,li {
padding:0px;
margin:0px;
}
.container ul li {
float:left;
position:relative;
}
.container h5 {
background:rgba(0,0,0,0.5);
position:absolute;
bottom:4px;
width:100%;
padding:5px;
color:#fff;
text-align:center;
margin-bottom:0px;
-webkit-animation: headings 20s;
-moz-animation: headings 20s;
-ms-animation: headings 20s;
-o-animation: headings 20s;
animation: headings 20s;
}

@-webkit-keyframes headings {
10% {
margin-bottom:4px;
}
15%,30% {
margin-bottom:-200px;
}
}

@-moz-keyframes headings {
10% {
margin-bottom:4px;
}
15%,30% {
margin-bottom:-200px;
}
}

@-ms-keyframes headings {
10% {
margin-bottom:4px;
}
15%,30% {
margin-bottom:-200px;
}
}

@-o-keyframes headings {
10% {
margin-bottom:4px;
}
15%,30% {
margin-bottom:-200px;
}
}

@keyframes headings {
10% {
margin-bottom:4px;
}
15%,30% {
margin-bottom:-200px;
}
}

Hope you like this post :) Thanx :)

Styling specific rows of a table using pseudo-classes.

CSS pseudo-classes are used to add special effects to some selectors.

HTML :)

<title>pseudo-classes</title>
<body>
<table width="400" border="1">
<tbody>
<tr>
<th colspan="3" scope="col">Things I want for my birthday!</th>
</tr>
<tr>
<th width="50" scope="col">Item #</th>
<th width="75" scope="col">Item Name</th>
<th width="215" scope="col">Cost</th>
</tr>
<tr>
<td>1</td>
<td>Mercedes SLS</td>
<td>$225,000</td>
</tr>
<tr>
<td>2.</td>
<td>Home in Beverly Hills</td>
<td>$50,000,00</td>
</tr>
<tr>
<td>3.</td>
<td>One of those curved TVs</td>
<td>$5,000</td>
</tr>
<tr>
<td>4.</td>
<td>Goldmund Speakers</td>
<td>$300,000</td>
</tr>
<tr>
<td>5.</td>
<td>An envelope full of money</td>
<td>$100,000</td>
</tr>
<tr>
<td>6.</td>
<td>Apple Stock</td>
<td>$5,000,000</td>
</tr>
<tr>
<td>7.</td>
<td>Vitamix 7500 Blender</td>
<td>$529</td>
</tr>
<tr>
<td>8. </td>
<td>Executive Membership at Costco</td>
<td>$150</td>
</tr>
<tr>
<td>9.</td>
<td>A briefcase full of money</td>
<td>$5,000,000</td>
</tr>
<tr>
<td>10. </td>
<td>Dog</td>
<td>$500</td>
</tr>
</tbody>
</table>

CSS :)

@charset "UTF-8";
/* CSS Document */

tr:nth-child(odd) {
background-color: #a9cdeb;
}

tr td:last-child{
font-style: italic;
}
tr:nth-child(3), tr:nth-child(4), tr:nth-child(5){
color: red;
}

tbody tr: {
color: #FF0004;
fo
}

Output :)

How to use @font-face for web page?

HTML :)

CSS :)

h1 {
font-family: 'Amatic SC', cursive;
}

Output :)

Sunday, September 14, 2014

How to horizontally center a div in a div?

HTML :)

<div class="outer">
<div class="innerdivs">
Left Div
</div>
<div class="innerdivs">
Right Div
</div>
<div class="innerdivs">
Center Div
</div>
</div>

CSS :)

html{
background: #FFF;
color: #FFF
}

.outer {
background: gray;
display: block;
height: 144px;
margin: auto;

position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;

width: 50%;

-webkit-column-count: 3;
column-count: 3;
}

.innerdivs {
border: 1px solid red;
height: 142px;
text-align: justify;
width: 100%;
}

Output :)

Scroll background image on the body on resize

body {
background-color: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/mahi.jpg);
background-repeat: no-repeat;
background-position:center top;
min-width: 1390px;
min-height: 903px;
}

Using this code, When You resize the browser you can see the scrollbar appearing so that image can be scrolled.