blogfreakz.com » CSS3

Create a Heart Shape With Pure CSS3

Marvin@Blogfreakz — Fri, 10 Feb 2012 05:40:03 +0000

For celebrating Valentine’s Day, this is a great tutorial from Web Froze where you get to use pure CSS3 to create a nice heart shape for your web design graphics. Below are the following codes to achieve this.

CSS

.heart-shape {

position: relative;

width: 100px;

height: 90px;

margin:10px 0px;

.heart-shape:before,

.heart-shape:after {

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: #fd2d8a;

-moz-border-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

.heart-shape:after {

left: 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

transform-origin :100% 100%;

HTML

Animated CSS3 Multilevel Menu with Transition

Marvin@Blogfreakz — Mon, 30 Jan 2012 08:06:45 +0000

Script-tutorials.com gives us this cool UL-LI-based multilevel menu, with transition and animation effect using CSS3. You can create this menu in 2 easy steps.

Click on the above image to view the demo.

You may also download the full pack HERE.
Step 1: HTML

Index.html

CSS3 multilevel menu with transition and animation | Script Tutorials

CSS3 multilevel menu with transition and animation

Back to original tutorial on Script Tutorials

Parent link #1

Sub #11

Sub #12

Sub #13

Sub #14

Parent link #2

Sub #21

Sub #22

Sub #23

Sub #24

Parent link #3

Sub #31

Sub #32

Sub #33

Sub #34

Parent link #4

Sub #41

Sub #42

Sub #43

Sub #44

Step 2: CSS

Css/menu.css

ul#nav {
    border: 1px solid #454545;
    display: block;
    height: 400px;
    margin: 0;
    padding: 15px;
    width: 160px;

    -moz-border-radius: 9px;
    -ms-border-radius: 9px;
    -webkit-border-radius: 9px;
    -o-border-radius: 9px;
    border-radius: 9px;

    background: -moz-linear-gradient(#f1f7ff, #d9e1ec);
    background: -ms-linear-gradient(#f1f7ff, #d9e1ec);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1f7ff), color-stop(100%, #d9e1ec));
    background: -webkit-linear-gradient(#f1f7ff, #d9e1ec);
    background: -o-linear-gradient(#f1f7ff, #d9e1ec);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f7ff', endColorstr='#d9e1ec');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f7ff', endColorstr='#d9e1ec')";
    background: linear-gradient(#f1f7ff, #d9e1ec);
}

@-moz-keyframes custom_effect {
    0% {
        background:rgba(255, 255, 255, 0.0);
        height: 60px;
    }
    33% {
        background:rgba(255, 255, 255, 0.0);
        height: 160px;
    }
    66% {
        background:rgba(255, 255, 255, 1.0);
    }
    100% {
        background:rgba(190, 220, 255, 0.8);
        height: 135px;
    }
}
@-webkit-keyframes custom_effect {
    0% {
        background:rgba(255, 255, 255, 0.0);
        height: 60px;
    }
    33% {
        background:rgba(255, 255, 255, 0.0);
        height: 160px;
    }
    66% {
        background:rgba(255, 255, 255, 1.0);
    }
    100% {
        background:rgba(190, 220, 255, 0.8);
        height: 135px;
    }
}
ul#nav li {
    -moz-border-radius: 9px;
    -ms-border-radius: 9px;
    -webkit-border-radius: 9px;
    -o-border-radius: 9px;
    border-radius: 9px;

    background-color:transparent;
    border: 1px solid #454545;
    display: block;
    height: 60px;
    line-height: 60px;
    margin-bottom: 15px;
    overflow: hidden;
}
ul#nav li:hover {
    -moz-animation-name: custom_effect;
    -moz-animation-duration: 0.4s;
    -moz-animation-timing-function: ease;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: custom_effect;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    background:rgba(190, 220, 255, 0.8);
    height: 135px;
}
ul#nav a {
    border-style: none;
    border-width: 0;
    color: #181818;
    cursor: pointer;
    float: left;
    font-size: 13px;
    font-weight: bold;
    line-height: 30px;
    margin-top: 100px;
    padding-left: 18px;
    text-align: left;
    text-decoration: none;
    text-shadow: 0 1px 1px #FFFFFF;
    vertical-align: middle;

    -moz-transition: all 0.1s 0.4s;
    -ms-transition: all 0.1s 0.4s;
    -o-transition: all 0.1s 0.4s;
    -webkit-transition: all 0.1s 0.4s;
    transition: all 0.1s 0.4s;
}

Incoming search terms for the article:

How to Make a Fancy Progress Bar With CSS3 And jQuery

Keith@Blogfreakz — Mon, 16 Jan 2012 14:53:02 +0000

Ivan Vanderbyl ‘s cool CSS3 tutorial actually shows us a numeric representation (i.e. percentage) of how long a process is going to take in modern browsers. Below is a screenshot of the resulting product, which you can click on to view the demo.

Now let’s start with the HTML.

HTML Markup

Pure CSS Progress Bar

Processing 79%

Hello, World!

Our CSS starts off with the basic styles for the layout, followed by some real serious stuff starting with @-webkit-keyframes animate-stripes {, which deals with the progress bar itself.

CSS3 Markup

body {

background:#eee;

padding: 30px;

font-size: 62.5%;

font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;

position: relative;

margin: 0;

}

#container {

margin: 0 auto;

width: 460px;

padding: 2em;

background: #DCDDDF;

}

.ui-progress-bar {

margin-top: 3em;

margin-bottom: 3em;

}

.ui-progress span.ui-label {

font-size: 1.2em;

position: absolute;

right: 0;

line-height: 33px;

padding-right: 12px;

color: rgba(0,0,0,0.6);

text-shadow: rgba(255,255,255, 0.45) 0 1px 0px;

white-space: nowrap;

}

@-webkit-keyframes animate-stripes {

from {

background-position: 0 0;

}

to {

background-position: 44px 0;

}

.ui-progress-bar {

position: relative;

height: 35px;

padding-right: 2px;

background-color: #abb2bc;

border-radius: 35px;

-moz-border-radius: 35px;

-webkit-border-radius: 35px;

background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6), color-stop(1, #9da5b0));

background: -moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);

-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;

-moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;

box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;

}

.ui-progress {

position: relative;

display: block;

overflow: hidden;

height: 33px;

-moz-border-radius: 35px;

-webkit-border-radius: 35px;

border-radius: 35px;

-webkit-background-size: 44px 44px;

background-color: #74d04c;

background: -webkit-gradient(linear, 0 0, 44 44,

color-stop(0.00, rgba(255,255,255,0.17)),

color-stop(0.25, rgba(255,255,255,0.17)),

color-stop(0.26, rgba(255,255,255,0)),

color-stop(0.50, rgba(255,255,255,0)),

color-stop(0.51, rgba(255,255,255,0.17)),

color-stop(0.75, rgba(255,255,255,0.17)),

color-stop(0.76, rgba(255,255,255,0)),

color-stop(1.00, rgba(255,255,255,0))

), -webkit-gradient(linear, left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));

background: -moz-repeating-linear-gradient(top left -30deg,

rgba(255,255,255,0.17),

rgba(255,255,255,0.17) 15px,

rgba(255,255,255,0) 15px,

rgba(255,255,255,0) 30px

), -moz-linear-gradient(#9bdd62 0%, #74d04c 100%);

-webkit-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;

-moz-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;

box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;

border: 1px solid #4c8932;

-webkit-animation: animate-stripes 2s linear infinite;

}

jQuery

Now that we’ve taken care of how the progress bar will look, it’s time for jQuery to do its magic by adding the animation. This is going to involve two steps;

Step 1: Paste this short code just before the closing body tag of your html file.

Step 2: Create a JavaScript (.js) file and paste this code in it.
(function( $ ){
$.fn.animateProgress = function(progress, callback) {
return this.each(function() {
$(this).animate({
width: progress+’%’
}, {
duration: 2000,

easing: ‘swing’,

step: function( progress ){
var labelEl = $(‘.ui-label’, this),
valueEl = $(‘.value’, labelEl);

if (Math.ceil(progress) < 20 && $(‘.ui-label’, this).is(“:visible”)) {
labelEl.hide();
}else{
if (labelEl.is(“:hidden”)) {
labelEl.fadeIn();
};
}

if (Math.ceil(progress) == 100) {
labelEl.text(‘Done’);
setTimeout(function() {
labelEl.fadeOut();
}, 1000);
}else{
valueEl.text(Math.ceil(progress) + ‘%’);
}
},
complete: function(scope, i, elem) {
if (callback) {
callback.call(this, i, elem );
};
}
});
});
};
})( jQuery );

$(function() {
$(‘#progress_bar .ui-progress .ui-label’).hide();
$(‘#progress_bar .ui-progress’).css(‘width’, ’7%’);

$(‘#progress_bar .ui-progress’).animateProgress(43, function() {
$(this).animateProgress(79, function() {
setTimeout(function() {
$(‘#progress_bar .ui-progress’).animateProgress(100, function() {
$(‘#main_content’).slideDown();
});
}, 2000);
});
});

});

Save your .js file and then try to open your HTML file to see how you did. Once the progress bar reaches 100%, a small “Hello World” greeting will appear.

Hope you enjoy doing this tutorial, but more importantly, I hope that you’ll have fun incorporating this in to your website.

Incoming search terms for the article:

How To Create a Cool CSS3 Music Player

Marvin@Blogfreakz — Mon, 16 Jan 2012 14:09:09 +0000

No music, no life. And as far as web design is concerned, this awesome CSS3 music player would be perfect for adding a new dimension to your blog or website.

Indonesian artist Hidayat Sagita made this tutorial in which the goal is to use CSS3 instead of images, so CSS3 properties replace the following Photoshop techniques:

1. -webkit-gradient or –moz-linear-gradient property is used for color gradient
2. Border property for stroke.
3. –webkit-box-shadow, -moz-box-shadow or box shadow property for drop shadow
4. –webkit-border-radius, -moz-border-radius, border-radius for rounded corner
5. For a smooth bevel, the border property is used on one side or more with thickness of 1 pixel
6. Stacked layer for layer masking

Demo
Download

Some of this player’s properties are only supported by few browsers, but it’s so powerful that minimal use of images is required. Also, jazzing up your website with a player like this is totally worth it, so a browser upgrade won’t hurt at all.

Incoming search terms for the article:

How to Create CSS3 Speech Bubbles

Marvin@Blogfreakz — Thu, 12 Jan 2012 01:39:59 +0000

The use of speech bubbles in web design has become so popular that it has become an integral feature in commenting. This tutorial by Nicolas Gallagher teaches us how to create our own.

Many tutorials out there rely on HTML and JavaScript which, aside from being tedious to work on, don’t work well on IE5. Gallagher’s Speech Bubbles contains different forms made with CSS2.1 and enhanced with CSS3 which can be applied to your existing HTML.

This is supported by Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

Click on the above image to view the demo, or click here for a more detailed explanation of its CSS.

Incoming search terms for the article:

How to Create Isometric 3D Text With CSS3

Keith@Blogfreakz — Wed, 11 Jan 2012 05:24:38 +0000

This neat CSS3 snippet I found makes your text appear in isometric projection. Since it’s in CSS, you can also apply other effects like shadows, 2D transforms, blur, etc.

Here’s the snippet of the CSS used to accomplish the sample image above. But if you want to get the full code, you can either click on the above image or the download link below.

Check out the DEMO. What really impressed me is the part where you can type the text inside the box and you can see the effect as you type! Try it out yourself, or get the ZIP FILE now. Enjoy!