Blog Copas

Simple Tooltip Dropdown Menu CSS3

Simple Tooltip Dropdown Menu CSS3 - Efek tooltip selain untuk link dan gambar bisa juga kita terapkan dalam bentuk menu dropdown agar tampilan lebih kreatif dan cantik tentunya. Banyak cara untuk membuat efek tooltip mulai menggunakan gambar, CSS maupun efek Jquery UI, namun kali saya hanya akan memberikan contoh simplenya menggunakan efek hover pseudo element ( before: after: ) dengan CSS3.

Sebagai gambaranya bisa lihat demonya dibawah ini :

DEMO

VIEW CODE

Untuk konsep dasarnya sebagai berikut :

CSS

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
#menu{
width: 100%;
padding:10px 0 0 0;
list-style: none;
background: #34495e;border-left:30px solid #34495e;border-radius:3px
}

#menu li{
float: left;
padding:0 0 10px 0;
position: relative;
}

#menu a{
float: left;
height: 25px;
padding:0 12px 0 12px;
color: #fff;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
}

#menu li:hover > a{background:#16a085;
color: #fff;
}

*html #menu li a:hover{ /* IE6 */
color: #fff;
}

#menu li:hover > ul{
display: block;
}

/* Sub-menu */
#menu ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #2c3e50;
-moz-border-radius: 5px;
border-radius: 5px;
}

#menu ul li{
float: none;
margin:0;
padding: 0;
display: block;
}

#menu ul li:last-child{
}

#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}

#menu ul a:hover{
background: #16a085;
}

#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #2c3e50;
}

#menu ul li:first-child a:hover:after{
border-bottom-color: #2c3e50;
}

#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

HTML

<ul id="menu">
<li>
<a href="#"><i class="fa fa-cogs"></i> MENU 1</a>
<ul>
<li><a href='#'> <i class="fa fa-cogs"></i> Settings</a></li>
<li><a href='#'> <i class="fa fa-envelope-o"></i> Contact Me</a></li>
<li><a href='#'> <i class="fa fa-tag"></i> Tag</a></li>
<li><a href='#'> <i class="fa fa-user"></i> About Me</a></li>
</ul>
</li>
<li>
<ul>
menu seterusnya.....
</ul>
</li>
</ul>

Anda cukup mengganti tanda # dengan url yang ingin anda masukkan, baca juga drop down menu metro ui awesome dan modern dropdown menu button css3

Flat UI Portfolio Template

DEMO

DOWNLOAD

Test template dengan portfolio post ui design, seperti artikel sebelumnya Flat Template Portfolio Design yang masih mengusung gaya flat ui style ke dalam blogger template.

Fitur Template :

1. One Page preview
2. Parallax Effect
3. Corousel Slider Post
3. Text Slider
4. Responsive Design
5. Flat Design
6. Smooth Scrolling
7. Awesome Icon
8. Slide Down Navigation
9. Grid Post View

Silakan di obrak abrik templatenya buat eksperimen lanjutan..!!!

Strength Indicator Password Dengan Jquery

Strength Indicator Password Dengan Jquery - Jika Anda ingin membangun sebuah sistem web yang memungkinkan pengguna untuk memasukkan password mereka sendiri, maka itu selalu merupakan ide yang baik untuk memberi mereka umpan balik instan mengenai kekuatan password mereka, sehingga pengguna dapat mengubah password untuk membuatnya lebih aman. Dengan memanfaatkan Jquery kita bisa membuatnya layaknya web - web besar dan profesional.

DEMO CODE

Untuk konsep dasarnya seperti berikut :

CSS

input#pwd {
width:180px;
padding:3px;
color: #000;
float:left;
margin-right:10px;
}
#pwd_strength_wrap {
border: 1px solid #D5CEC8;
display: none;
float: left;
padding: 10px;
position: relative;
width: 320px;
}
#pwd_strength_wrap:before, #pwd_strength_wrap:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent; /* arrow size */
}
#pwd_strength_wrap:before {
border-bottom: 7px solid rgba(0, 0, 0, 0);
border-right: 7px solid rgba(0, 0, 0, 0.1);
border-top: 7px solid rgba(0, 0, 0, 0);
content: "";
display: inline-block;
left: -18px;
position: absolute;
top: 10px;
}
#pwd_strength_wrap:after {
border-bottom: 6px solid rgba(0, 0, 0, 0);
border-right: 6px solid #fff;
border-top: 6px solid rgba(0, 0, 0, 0);
content: "";
display: inline-block;
left: -16px;
position: absolute;
top: 11px;
}
#pswd_info ul {
list-style-type: none;
margin: 5px 0 0;
padding: 0;
}
#pswd_info ul li {
background: url(icon_pwd_strength.png) no-repeat left 2px;
padding: 0 0 0 20px;
}
#pswd_info ul li.valid {
background-position: left -42px;
color: green;
}
#passwordStrength {
display: block;
height: 5px;
margin-bottom: 10px;
transition: all 0.4s ease;
}
.strength0 {
background: none; /* too short */
width: 0px;
}
.strength1 {
background: none repeat scroll 0 0 #FF4545;/* weak */
width: 25px;
}
.strength2 {
background: none repeat scroll 0 0 #FFC824;/* good */
width: 75px;
}
.strength3 {
background: none repeat scroll 0 0 #6699CC;/* strong */
width: 100px;
}

.strength4 {
background: none repeat scroll 0 0 #008000;/* best */
width: 150px;
}

JQUERY

HTML

<form>
<p><label>Type your password:</label></p>
<input type="password" id="pwd" />
<div id="pwd_strength_wrap">
<div id="passwordDescription">Password not entered</div>
<div id="passwordStrength" class="strength0"></div>
<div id="pswd_info">
<strong>Strong Password Tips:</strong>
<ul>
<li class="invalid" id="length">At least 6 characters</li>
<li class="invalid" id="pnum">At least one number</li>
<li class="invalid" id="capital">At least one lowercase & one uppercase letter</li>
<li class="invalid" id="spchar">At least one special character</li>
</ul>
</div>
</div>
</form>

Silakan kreasikan sendiri mulai dari bentuk warna dan efek sesuai selera anda...!!!

Flat UI Download Button Awesome

Flat UI Download Button Awesome - Layaknya multiple button download CSS3 yang saya share pada artikel sebelumnya dengan memanfaatkan font awesome icon untuk mempercantik tampilan. Menerapkan pseudo element dengan CSS value content sebuah icon awesome untuk membuat sebuah tombol button download yang lebih modern dan menarik seperti Flat Menu UI Efek Flip CSS3. Dan tentunya juga akan terlihat lebih bergaya dengan konsep metro ui style dalam sebuah Flat Template Portfolio Design.

DEMO

VIEW CODE

Untuk konsep dasarnya sebagai berikut :

CSS

.vn-red a{
background-color:#e74c3c;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}

.vn-red a:before{
content:"\f019";
font-family:fontAwesome;
position:absolute;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size:28px;
border-radius:0 20px 0 0;
color:#000;
background-color:#fff;
opacity:0.3;
padding:20px;
top:0;
left:0
}

.vn-red a:hover{
background:#2c3e50
}

HTML

<div class="vn-red" style="text-align: center;">
<a href="#" class="btn-wrap">DOWNLOAD</a>
</div>

Anda cukup mengganti tanda # dengan URL yang ingin dimasukkan

PENTING...!!!

# Install CSS kodenya sebelum kode :

]]></b:skin>

# Untuk menampilkan button dalam postingan blog cukup masukkan HTMLnya di mode HTML
# Untuk pilihan warnanya silakan klik VIEW CODE

Demikian semoga bermanfaat dan Happy Blogging

Flat Menu UI Efek Flip CSS3

Flat Menu UI Efek Flip CSS3 - Dengan semakin maraknya para pengguna design UI ( User Interface ) baik Flat UI, Semantic UI, maupun Fitur Bootstrap framework ke dalam template blogger. Kali ini saya persembahkan lagi contoh Flat Menu Ui dengan efek flip menggunakan transform CSS3, dan tentunya masih dikombinasikan dengan font icon awesome seperti artikel sebelumnya Kombinasi Menu Metro Ui dengan Font Awesome dan Drop Down Menu Metro UI Awesome.

Silakan lihat demonya dibawah ini :

DEMO

VIEW CODE

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

nav ul {
min-width: 600px;
position: relative;
display: table;
margin: 50px auto;
clear: both;
}

nav ul li {
list-style: none;
float: left;
}

nav ul li a {
width: 100px;
height: 100px;
float: left;
margin: 0 10px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
}

nav ul li .front {
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg);
-o-transform: rotateX(0deg) rotateY(0deg);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

nav ul li:hover .front {
-webkit-transform: rotateX(0deg) rotateY(180deg);
-moz-transform: rotateX(0deg) rotateY(180deg);
-ms-transform: rotateX(0deg) rotateY(180deg);
-o-transform: rotateX(0deg) rotateY(180deg);
}

nav ul li .back {
position: absolute;
top: 0;
width: inherit;
height: inherit;
text-align: center;
z-index: -1;
-webkit-transform: rotateX(0deg) rotateY(-180deg);
-moz-transform: rotateX(0deg) rotateY(-180deg);
-ms-transform: rotateX(0deg) rotateY(-180deg);
-o-transform: rotateX(0deg) rotateY(-180deg);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

nav ul li:hover .back {
z-index: 1;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg);
-o-transform: rotateX(0deg) rotateY(0deg);
}

nav ul li i {
line-height: 100px !important;
color: white;
vertical-align: middle !important;
}

nav ul li span {
font-family: 'Roboto';
font-size: 20px;
font-weight: 300;
line-height: 100px;
color: white;
text-transform: lowercase;
vertical-align: middle;
}

nav ul li.color-1 .front,
nav ul li.color-1 .back {
background-color: #3498db;
}

nav ul li.color-2 .front,
nav ul li.color-2 .back {
background-color: #2ecc71;
}

nav ul li.color-3 .front,
nav ul li.color-3 .back {
background-color: #1abc9c;
}

nav ul li.color-4 .front,
nav ul li.color-4 .back {
background-color: #f39c12;
}

nav ul li.color-5 .front,
nav ul li.color-5 .back {
background-color: #34495e;
}

HTML

<nav>
<ul class="panel">
<li class="color-1"> <a href="#">
<div class="front">
<i class="fa fa-windows fa-4x"></i>
</div>
<div class="back">
<span>HOME</span>
</div>
</a>

seterusnya.......

</li>
</ul>
</nav>

Silakan anda kreasikan sendiri sesuai kebutuhan agar tampilan lebih maksimal, dan untuk HTML kode selengkapnya bisa dilihat di View Code ...!!!

Enjoy Blogging

Flat Template Portfolio Design

Flat Template Portfolio Design - Sesuai perkembangan webdesign saat ini saya memperkenalkan 3 template dengan tampilan layar penuh seperti template twitter bootstrap dan blogazine template yang lagi ngetren saat ini selain template blog metro ui.

Sebagai gambarannya dibawah ini:

1. FLATO REACTOR

PREVIEW

DOWNLOAD

Features:

Parallax effect
HTML5 / CSS3
FontAwesome Icons
Unlimited Colors
Smooth Scroll
Vertical Navigation
Easy To Customize
Clean and Organized Coded

2. ORIGIN TEMPLATE