Μετάβαση στο κύριο περιεχόμενο

Αναρτήσεις

Εμφάνιση αναρτήσεων με την ετικέτα CSS3

Show/Hide Menu with CSS

<style>
  /* wwwfoulscode.com */
  @import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}

.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}
.main-menu {
background:#fbfbfb;
border-right:1px solid #e5e5e5;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
 font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s …

Animated popup menu

Χρονια πολλά καλή χρονια να έχουμε όλοι μας και όλος ο κόσμος!

Ένα καταπληκτικό menu γραμμένο με html και css.
Σας ντίνο τον παρακάτω κώδικα η αλλαγές είναι δικέ σας, υπάρχει live demo στο τέλος του θέματος!

<style>
  /* www.foulscode.com */
  * { padding: 0px; margin: 0px; border: 0px; outline: 0px; }

body {
    font-family:Tahoma, sans-serif;
    font-size: 12px;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

li { list-style: none; }

.container { margin: 0px 20% 0px 20%; }

#head { margin-top: 20px; }

#menu .box {
    position: fixed;
    text-align: center;
    overflow: hidden;
    z-index: -1;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: rgba(0,0,0,0.8);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#menu ul {
    position: relative;
    top: 20%;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
  …

Animated CSS3 Buttons

<style>
    /* www.Foulscode.com */
    body {
padding-top: 50px;
padding-bottom: 20px;
font-family: 'Ubuntu', sans-serif;
background: #353535;
color: #FFF;
}
.jumbotron h1 {
color: #353535;
}
span.icon {
margin: 0 5px;
color: #D64541;
}
h2 {
color: #BDC3C7
}
.mrng-60-top {
margin-top: 60px;
}
/* Global Button Styles */
    /* www.Foulscode.com */
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.…

Attractive CSS3 Social Bar for Blog

Ένα Widget για τα social του site blog σας που εμφανίζεται στα αριστερά της οθόνης σας στάσιμο και να εξοικονομεί χορό από την σελίδα σας!

Αντιγραφή επικόλληση τον παρακάτω κώδικα:


<style>
/* foulscode.blogspot.gr */
.fixedmenu{ background:url('http://1.bp.blogspot.com/-FaeRKNmFDX8/Ud16d2_PZFI/AAAAAAAAAsM/5xugOK5YAuE/s1600/facebook.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.fixedmenu1{ background:url('http://3.bp.blogspot.com/-W7Z5XKfLWd8/Ud16eM8AadI/AAAAAAAAAsQ/cv7fgYD5fiE/s1600/facebook-hover.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.fixedmenu_1{margin:0px 0 0 43px}
.fixedmenutw{background:url('http://1.bp.blogspot.com/-WeUDB_HkbWA/Ud16fP78JoI/AAAAAAAAAsk/1k2WNVRCBvo/s1600/twitter.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.fixedmenutw1{background:url('h…

How to Add Neat CSS3 Dropdown Menu in Blogger

Για να εφαρμόσετε το menu στο blog σας αντιγράφουμε τον παρακάτω κώδικα:

<style>
/* foulscode.blogspot.gr */
#contact-links {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
    margin: auto;
    position: relative;
    width: 100%;
}
#contact-links a {
    color: #4C9FEB;
}
#contact-links a:hover {
    color: #3D85C6;
}
#my-links {
    float: right;
    font-size: 12px;
    margin: 4px 10px;
    overflow: hidden;
    text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
    margin-left: 7px;
    padding-left: 8px;
    text-decoration: none;
}
#my-links a:first-child {
    border-width: 0;
}
#menu-container {
    background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientTy…

Another HTML5, CSS3 Navigation Menu

Αντιγραφή επικόλληση τον παρακάτω κώδικα:

<style>
/* foulscode.blogspot.gr */
#org_menu {
    position: relative;
    margin: 0 auto;
    clear: both;
    width: 960px;
    }
#org_menu:before {
    content: "";
    position: absolute;
    left: -10px;
    bottom: -9px;
    z-index: 1;
    border: 10px solid transparent;
    border-right-color: #c50;
}
#org_menu ul {
    display: block;
    position: relative;
    z-index: 2;
    padding: .2em 30px;
    margin-right: -2em;
    list-style: none;
    background: #f72;
    font-family: 'Arial', serif;
    font-weight:bold;
    font-size: 16px;
    line-height: 1;
    color: white;
    text-transform: capitalize;
    border-radius: 0 9999px 9999px 0;
    box-shadow: 0 2px 8px -3px rgba(0,0,0,.5),
                0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;;
}
#org_menu ul:after {
    content: "";
    clear: both;
    display: block;
    visibility: hidden;
}
    #org_menu li {
        float: left;
  …