CSS3 Powered Portfolio & Menu

Today I just saw a nice JQuery menu which impressed me and my friends. One of my friend challenged me to make this in CSS3, so within few hours I completed the challenge and came up with a nice concept of PORTFOLIO + MENU.

I am going to share a tutorial on making a portfolio website within a menu using CSS3.

We will make a li list menu and inside that we will wrap our content div,

• on hover of menu some nice effects + on click our content = a perfect CSS3 powered portfolio website.

HTML Markup:

[html]
<div id="wrapper">
<div id="portfolio">
<ul id="box">
<li style="background-color: #2C618F;">Home
<input type="checkbox" id="oneCheck" />
<label for="oneCheck"></label>
<div class="content" style="background-color: #2C618F;"><p>Welcome to WebsTutorial.Com(WT), find amazing tutorials on CSS3, HTML5, PHP, JQuery, AJAX, Wordpress and many more.<br />
Some cool tutorials.
<dl id="list">
<dt><a href="http://webstutorial.com/range-input-slider-html5-css3/html-5" target="_blank">HTML5 Range Slider</a></dt>
<dt><a href="http://webstutorial.com/css3-tabs/css3" target="_blank">CSS3 Tabs</a></dt>
<dt><a href="http://webstutorial.com/css3-clock/css3" target="_blank">CSS3 Clock</a></dt>
</dl>
</p><label for="oneCheck">X</label></div>
</li>
<li style="background-color: #91AB31;">About Us
<input type="checkbox" id="twoCheck" />
<label for="twoCheck"></label>
<div class="content" style="background-color: #91AB31;"><p>WebsTutorial is a website for all kind of website coders, here we share amazing tutorials on topics like HTML5, CSS3, JQuery, AJAX etc. We also share tutorials for making you learn PHP, cake php, codeigniter. We also work as freelancers for making websites in CMS or Frameworks.</p><label for="twoCheck">X</label></div>
</li>
<li style="background-color: #714A28;">Portfolio
<input type="checkbox" id="threeCheck" />
<label for="threeCheck"></label>
<div class="content" style="background-color: #714A28;">
<p style="overflow-y: scroll; height: 200px; padding: 0pt 40px;">
<img src="http://quanticalabs.com/Nostalgia/Template/image/_sample/thumb_img1.jpg" />
<img src="http://quanticalabs.com/Nostalgia/Template/image/_sample/thumb_img2.jpg" />
<img src="http://quanticalabs.com/Nostalgia/Template/image/_sample/thumb_img3.jpg" />
<img src="http://quanticalabs.com/Nostalgia/Template/image/_sample/thumb_img4.jpg" />
<img src="http://quanticalabs.com/Nostalgia/Template/image/_sample/thumb_img5.jpg" />
<img src="http://quanticalabs.com/Nostalgia/Template/image/_sample/thumb_img6.jpg" />
<img src="http://quanticalabs.com/Nostalgia/Template/image/_sample/thumb_img7.jpg" />
<img src="http://quanticalabs.com/Nostalgia/Template/image/_sample/thumb_img8.jpg" />
</p>
<label for="threeCheck">X</label></div>
</li>
<li style="background-color: #E58600;">Contact Us
<input type="checkbox" id="fourCheck" />
<label for="fourCheck"></label>
<div class="content" style="background-color: #E58600;"><p>You can always contact us by emailing us your queries, suggestions or enquiries on <a href="mailto:admin@webstutorial.com">admin@webstutorial.com</a></p><label for="fourCheck">X</label></div>
</li>
</ul>
</div>
</div>
[/html]

HTML is really simple ti understand, now comes the CSS3 code:

[css]
ul#box {
background: none repeat scroll 0 0 #EEEEEE;

-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;

-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
float: left;
padding: 20px;
position: relative;
width: 400px;
}

#box li {
list-style-type: none;
float: left;
width: 200px;
font-size: 0px;

-webkit-transition: font ease 500ms;
-moz-transition: font ease 500ms;
-o-transition: font ease 500ms;
-ms-transition: font ease 500ms;
transition: font ease 500ms;
width: 200px;
height: 120px;
text-align: center;
color: #fff;
font-style: italic;
overflow: hidden;
}

#box li input[type="checkbox"] {
display: none;
}

#box li:hover {
font-size: 28px;

background-image: -webkit-linear-gradient(center top , rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(center top , rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(center top , rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
background-image: linear-gradient(center top , rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}

#box li label {
background: transparent;
width: 200px;
height: 120px;
display: block;
}

.content {
height: 0;
overflow: hidden;
padding: 0;
width: 0;
font-size: 12px;

-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
z-index: 100;
position: absolute;
top: 20px;
left: 20px;
}

#oneCheck:checked ~ .content,#twoCheck:checked ~ .content,#threeCheck:checked ~ .content,#fourCheck:checked ~ .content {
font-size: 12px;
height: 230px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
filter: alpha(opacity=95);
opacity: 0.95;
padding: 10px 10px 0;
width: 380px;
overflow: visible;
}

.content label {
display: none;
}

#oneCheck:checked ~ .content label,#twoCheck:checked ~ .content label,#threeCheck:checked ~ .content label,#fourCheck:checked ~ .content label {
border: 5px solid #FFFFFF;

-webkit-border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
border-radius: 40px 40px 40px 40px;
color: #FFFFFF;
cursor: pointer;
font: bold 20px/40px arial,helvetica;
height: 40px;
position: absolute;
right: -20px;
text-align: center;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
filter: alpha(opacity=95);
opacity: 0.95;
background: #000000;
top: -20px;
width: 40px;
}
[/css]

We are simply using checkbox to show and hide the portfolio content using :checked pseudo class.
On checked we are showing the content div using CSS3 transition effects.

Why to use JQuery when you have power of CSS3 ;)

CSS3 Image Hover Effects With Caption | NO JAVASCRIPT

A simple css3 snippet share, to show image hover effects with caption text. I recently saw a website where the author of the site nicely presented his description using simple CSS3 and his own photo. Previously we use to do with having our own photo and beneath we use to write small description, but now CSS3 is here to help us.

Lets start with basic HTML layout. We will use an image, and the overlay text will be within the mask. On hover the mask will appear with CSS3 transition effect.



Basic HTML
[html]
<div class="view view-sixth" style="margin-bottom:30px">
<img src="PATH_TO_AUTHOR_IMAGE">
<div class="mask">
<h2>Hi, my name is Ntechi</h2>
<p>I am a php coder and sharing a simple CSS3 effect </p>
<a href="http://webstutorial.com" class="info" target="_blank">Read More</a>
</div>
</div>
[/html]
 


CSS

[css]
.view-sixth img {
-webkit-transition: all 0.4s ease-in-out 0.5s;
-moz-transition: all 0.4s ease-in-out 0.5s;
-o-transition: all 0.4s ease-in-out 0.5s;
-ms-transition: all 0.4s ease-in-out 0.5s;
transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask {
background: rgba(146,96,91,0.5);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-in 0.4s;
-moz-transition: all 0.3s ease-in 0.4s;
-o-transition: all 0.3s ease-in 0.4s;
-ms-transition: all 0.3s ease-in 0.4s;
transition: all 0.3s ease-in 0.4s;
}
.view-sixth h2 {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-webkit-transition: all 0.3s ease-in-out 0.1s;
-moz-transition: all 0.3s ease-in-out 0.1s;
-o-transition: all 0.3s ease-in-out 0.1s;
-ms-transition: all 0.3s ease-in-out 0.1s;
transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-webkit-transition: all 0.3s ease-in-out 0.2s;
-moz-transition: all 0.3s ease-in-out 0.2s;
-o-transition: all 0.3s ease-in-out 0.2s;
-ms-transition: all 0.3s ease-in-out 0.2s;
transition: all 0.3s ease-in-out 0.2s;
}
.view-sixth a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: all 0.3s ease-in-out 0.1s;
-moz-transition: all 0.3s ease-in-out 0.1s;
-o-transition: all 0.3s ease-in-out 0.1s;
-ms-transition: all 0.3s ease-in-out 0.1s;
transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
.view-sixth:hover img {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
.view-sixth:hover h2 {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view-sixth:hover p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view-sixth:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}

.view {
width: 200px;
height: 283px;
margin: 10px;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 200px;
height: 260px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 13px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
border-radius:10px;
}
.view a.info:hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
[/css]

 

Simple and clean, use it and share it.

Range Slider | Range Input Using HTML5 & CSS3 | NO JAVASCRIPT

A regular website coder will face a situation where they will have to use a range slider to fulfill some requirements. I regularly used JQuery UI range slider, but thanks to HTML5 that they made us our life easy. HTML5 has a new input tag, its type is defined as "range". Using this, a range slider will be formed, but for now this is only supported by -webkit- supported browsers. You can read more on new HTML5 input tags over here.



In todays tutorial we will explore range slider.

Basic syntax:

[html]
<input type="range" id="rangeinput" value="50"/>
[/html]

You can edit the CSS and change the slider icon.

[css]
input[type="range"] {
-webkit-appearance: none;
background-color: black;
height: 2px;
}

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
position: relative;
top: -1px;
z-index: 1;
width: 11px;
height: 11px;

-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb));
}
[/css]

You can check the demo and download the files. Demo will be only supported in WEBKIT browsers

CSS3 Tabs | NO JAVASCRIPT

TABS, a famous word in website development. Every coder has used it in websites but only using JQuery. Today I ll share a small trick to use tabs without using any JQueries but only using CSS3.



Like previous tutorial on CSS3 toggle, in this also we will use pseudo element :target

The logic is really simple, we will form an unordered list, and inside li there will be a div with unique ID, when this unique ID will be called through some href link then the respective div will appear.

So here is the basic HTML Code:

[html]
<div id="container">
<p style="text-align:center;">CSS3 TABS. <b><i>NO JAVASCRIPT&nbsp;</i></b></p>
<div id="tabs">
<ul>
<li id="One"><a href="#One" id="first">One</a>
<div>
<p>In today’s tutorial I am going to share a simple way to make News Ticker and Notification Bar using CSS3, NO JAVASCRIPT. Previously it was very difficult to code it in javascript and make it work with other plugins, but today I decided to make it possible in CSS3 and voila, I succeeded So lets</p>
</div>
</li>
<li id="Two"><a href="#Two" id="sec">Two</a>
<div>
<p>While reading more about HTML5 & CSS3 I just found an amazing css3 button styling. This time I wanted to do something which I was doing from past 2 years using JQuery. In this tutorial I am going to teach you how to make a toggle slideDown and slideUp function using CSS3 and HTML5. To</p>
</div>
</li>
<li id="Three"><a href="#Three" id="third">Three</a>
<div>
<p>Lets start learning CSS3 before its too late, I just saw a website which amazed me with its animation effects. First I thought that the site is using some JQuery libraries but when I actually went into the code, I found it is CSS3. So I started learning it, and today I made my first Read more...</p>
</div>
</li>
</ul>
</div>
</div>
[/html]

We will be using transition to show the fade in fade out effect using opacity. On click of href the transition will be triggered and the opacity of the div changes.

CSS

[css]
li div {
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
border: 1px solid #888888;
float: left;
opacity: 0;
padding: 0 15px;
position: absolute;
visibility: hidden;
width: 250px;
left:0;
background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;
}

#tabs li a{
background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 18px) repeat scroll 0 0 transparent;
border: 1px solid #888888;
margin: 0 3px 0 0;
padding: 5px 25px;
position: relative;
z-index:1;
font-size: 14px;
border-radius:10px 10px 0 0;
display:block;
top:1px;
}

#One:target div, #Two:target div, #Three:target div{
opacity:1;
visibility:visible;
}
[/css]

You can download and check the demo, share it if you like it and suggestions are always welcome.