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

Αναρτήσεις

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

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);
  …

Pure Css Ribbon Header

Γράψτε το κείμενο σας μέσα σε μια κορδέλα.

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


<style>
/* foulscode.blogspot.com */
#header h1 {
    font-size: 28px;
font-weight: 300;
font-family: 'open sans';
line-height: 54px;
letter-spacing: 3px;
height: 56px;
margin: 0;
display: inline-block;
-webkit-font-smoothing: antialiased;
 white-space:nowrap;
}
#header a {
  color:#fff;
  text-decoration:none;
}
.ribbon {
background-color:#16a085; /* bg color for center of ribbon */
    border:3px solid #eee; /*border color for center of ribbon */
    padding: 0 20px;
height: 56px;
display: inline-block;
position: relative;
margin-left: 56px;
margin-right: 56px;
}
.ribbon:before, .ribbon:after {
content: '.';
text-indent: -9999em;
height: 0;
width: 0;
border-style: solid;
border-width: 28px;
position: absolute;
left: -45px;
top: 10px;
display: block;
z-index: -1;
}
.ribbon:before {
border-color: #138a72 #138a72 #138a72 transparent; /*bg color for left side of ribbon */
}
.ribbo…

CSS Rolling Menu

Ένα όμορφο menu για το blog και το site σας!
Αντιγραφή τον παρακάτω κώδικα:

<style>
/* foulscode.blogspot.com */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url(http://themes.googleusercontent.com/static/fonts/robotocondensed/v7/Zd2E9abXLFGSr9G3YK2MsFzqCfRpIA3W6ypxnPISCPA.woff) format('woff');
}


html{ height:100%; font-family: 'Roboto Condensed'; }
body{ min-height:100%;  background-image: -webkit-radial-gradient(top, circle cover, #252233 0%, #252233 80%);
 background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
 background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
 background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%); }

*{ margin:0; padding:0; }

body{ text-align:center; padding:20px 0; }

    h1{ font-size:1.8em; color:#fff; margin-bottom:50px; letter-s…

checkbox styling in css

HTML:
<h1>Styled Checkbox</h1>
<div class="modal-1">
  <div class="checkbox inline">
    <input type="checkbox" checked>
    <label>Option 1</label>
  </div>
   <div class="checkbox inline">
    <input type="checkbox" >
    <label>Option 2</label>
  </div>
</div>

<div class="modal-2">
  <div class="checkbox inline">
    <input type="checkbox" checked>
    <label>Option 1</label>
  </div>
   <div class="checkbox inline">
    <input type="checkbox" >
    <label>Option 2</label>
  </div>
</div>


<div class="modal-3">
  <div class="checkbox inline">
    <input type="checkbox" checked>
    <label>Option 1</label>
  </div>
   <div class="checkbox inline">
    <input type="check…

CSS Spotlight Menu

Tο εφέ μετάβασης λειτουργεί σε browsers που υποστηρίζουν CSS3 μεταβάσεις, δηλαδή, FF3.5 +, Safari 3.1 +, Google Chrome, Opera και 11.6 +.


Αντιγραφή τον παρακάτω κώδικα:


<style type="text/css">
/* foulscode.blogspot.gr */
.spotlightmenu{
width: 100%;
overflow:hidden;
}
.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}
.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}

.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px; /* horizontal diameter of spotlight */
height:50px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3…

Δημιουργώντας jQuery tabs με χρήση HTML και CSS.Ειδικά για αρχάριους..!

Demo του jQuery Tabs tutorial.
Ας δούμε ένα demo, για να δείτε τι θα φτιάξουμε σήμερα.Είναι πολύ απλό να δημιουργήσετε jQuery tabs με απλή HTML και λίγο CSS, όσο δεν φαντάζεστε.

Προαπαιτούμενη γνώση για το tutorial αυτό.
Οι γνώσεις που χρειάζονται για να παρακολουθήσετε το tutorial αυτό είναι πολύ απλή γνώση HTML-CSS και ελάχιστη γνώση jQuery.Ο κώδικας θα εξηγείται αναλυτικά στα σημεία που χρειάζεται.. :)

Ξεκινώντας το jQuery Tabs tutorial…
Πριν ξεκινήσουμε θα κάνουμε την εξής παρατήρηση. Όλο τον σημερινό κώδικα θα τον γράψουμε σε ένα αρχείο , το tabs.html. Αυτή η πρακτική ΔΕΝ ΣΥΝΙΣΤΑΤΑΙ σε κανονικά websites απλά εμείς θα το κάνουμε έτσι για λόγους παρουσίασης.Κανονικά πρέπει τα stylesheets, τα js αρχεία και το html να είναι σε ξεχωριστά αρχεία και να τα καλούμε όπου χρειαζόμαστε.Επίσης πολύ καλό είναι να το δημιουργήσετε και να το τρέξετε σε περιβάλλον WAMPserver.

Ξεκινάμε , δημιουργώντας στον αγαπημένο μας editor ένα κενό αρχείο και το σώζουμε με το όνομα :tabs.html. To αρχείο αυτό εί…

CSS Buttons

Μερικά όμορφα Buttons για site και blog.

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



<style>
/* foulscode.blogspot.gr */
body { text-align: center; padding: 40px; background: #F5F5F5; }
.container { width: 500px; text-align: center; margin: auto;}
.copyright { margin-top: 50px; font-size: 12px; text-transform: uppercase; }
.copyright a { text-decoration: none; padding: 5px;background: #c0392b; color: #FFFFFF; }
.copyright a:hover { background: transparent; color: #c0392b; }
.button {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding-right: 30px;
  padding-left: 70px;
  position: relative;
  background-color:rgb(41,127,184);
  color:rgb(255,255,255);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;


  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  text-shadow:0px 1px 0px rgba(0,0,0,0.5);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,…

Καταπληκτική Css Βιβλιοθήκη Για Δημιουργία Κουμπιών – Buttons

Το Buttonsείναι μια βιβλιοθήκη CSS για τη δημιουργία εξαιρετικά προσαρμόσιμων, ευέλικτων και σύγχρονων web κουμπιών.
Είναι χτισμένο με Sass + Compass και έχει την υποστήριξη για τετράγωνα, στρογγυλά ή κυκλικά κουμπιά που μπορεί να είναι επίπεδα ή όχι και με προσαρμοσμένα εφέ (όπως λάμψη).
Τα μεγέθη, τα χρώματα, τα αποτελέσματα και οι γραμματοσειρές που χρησιμοποιούνται μπορούν όλα να αλλάξουν με τη βοήθεια των μεταβλητών και μπορεί να επεκταθεί εύκολα.
Υ.Γ. Κυκλοφορεί και μια Ruby Gem-friendly version Website:http://alexwolfe.github.io/Buttons/
Download:https://github.com/alexwolfe/Buttons

ΠΗΓΗ

CSS Flatly menu

Ένα κάθετο menu. Για να το εφαρμόσετε στο blog/site σας κάντε αντιγραφή επικόλληση τον παρακάτω κώδικα.


<style>
@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://fonts.googleapis.com/css?family=Alef);
/* foulscode */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif }
*{-webkit-font-smoothing:antialiased;}
body {
    background: url();
    /*foulscode.blogspot.gr*/
    -webkit-background-size: 160px;
    -moz-background-size: 160px;
    -o-background-size: 160px;
    background-size: 160px;
    font-family: Alef;
}
#nav {
    width: 180px;
    margin: 100px auto;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 180px;
}
ul a {
    display: block;
    width: 100%;
    height: 44px;
    background: #E7533C;
    color: #fafafa;
    text-decoration: none;
    text-align: left;
    line-height: 2;
    padding-left: 10px;
    font-size: 1.4em;
    border-bottom: 3px solid #cc4531;
}
ul a span {
    float: right;
    display: block;
    margin: …

Css Only Menus 1

Μετά από πολύ καιρό το πρώτο θέμα με μια σειρά από menu που θα βάζο κατά διαστήματα.


Αντιγραφή επικόλληση τον παρακάτω κώδικα:
 <style>
/* foulscode.blogspot.gr */
#menu a, #menu a:visited {
  text-align:center;
  text-decoration:none;
  color:#000;
  display:block;
  width:7em;
  height:1.2em;
  border:0.5em solid #fff;
  }
#menu a:hover {
  color:#fff;
  background-color:#b2ab9b;
  border-color:#dfd7ca #b2ab9b;
  }
/* foulscode.blogspot.gr */
</style>
<div id="menu">
  <a href="URL">TITLE</a>
  <a href="URL">TITLE</a>
  <a href="URL">TITLE</a>
  <a href="URL">TITLE</a>
  <a href="URL">TITLE</a>
</div>
LIVE DEMO

Αντικαταστήστε τα μαρκαρισμένα γράμματα και κάντε αποθήκευση.

Pure CSS - Image Slider

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


<style>
/* foulscode.blogspot.gr */
body {
  background: #ccc;
  width: 950px;
  margin: 0 auto;
  padding: 10px;
}
.slider {
  background: #111;
  width: 950px;
  height: 350px;
  padding: 10px;
  position: relative;
  top: 10px;
  box-shadow: 0 30px 50px -20px black;
  overflow: hidden;
}
.images {
  background: #ccc;
  width: 100%;
  height: 74%;
  transition: background .5s linear;
}
input[type='radio'] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #444;
  background-size: 225px 70px;
  width: 225px;
  height: 70px;
  margin: 5px;
  cursor: pointer;
  position: relative;
  float: left;
  top: 270px;
  -webkit-filter: sepia();
}
input[type='radio']:checked {
  content: '';
  border: solid 5px #ccc;
  box-shadow: none;
  -webkit-filter: none;
}
input[type='radio']:hover{
  border: solid 5px #fff;
  -webkit-filter: none;
  transform: scale(1.05);
  z-index: 9999;
}
.slide1 {
  background: url(http://iweb.uz/azik/wp-content/uploads…

Προτεινόμενα Post από CSS, jQuery

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


<style scoped="" type="text/css">
/* foulscode.blogspot.gr */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;…

Grey Color Glossy CSS Menu Bar

Αντιγραφή τον παρακάτω κώδικα:




<style>/* The CSS Code for the menu starts here */.rhm1{ width:780px; height:64px; margin:0 auto; background:url(http://2.bp.blogspot.com/-guZRdItzYWE/UIKsL4tv-3I/AAAAAAAAFTA/7_-1XjYNp-8/s1600/rhm1_bg.gif) repeat-x;  }.rhm1-left{ background:url(http://2.bp.blogspot.com/-FJBAnWPj6Wg/UIKsPvwGzJI/AAAAAAAAFTg/Nj3Ibj84coA/s1600/rhm1_l.gif) no-repeat; width:15px; height:64px; float:left;}.rhm1-right{ background:url(http://2.bp.blogspot.com/-ZuZHjF5liXI/UIKsQlrbx7I/AAAAAAAAFTo/INgYVyXqaoA/s1600/rhm1_r.gif) no-repeat; width:15px; height:64px; float:right;}.rhm1-bg{ background:url(http://2.bp.blogspot.com/-guZRdItzYWE/UIKsL4tv-3I/AAAAAAAAFTA/7_-1XjYNp-8/s1600/rhm1_bg.gif) repeat-x; height:64px;}.rhm1-bg ul{ list-style:none; margin:0 auto;}.rhm1-bg li{ float:left; list-style:none;}.rhm1-bg li a{ float:left; display:block; color:#ffe8cc; text-decoration:none; font:12px 'Lucida Sans', sans-serif; font-weight:bold; padding:0 0 0 18px; height:64px; line-h…

CSS Based Animated Accordion

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


<style>
/* CSS */
/* I have two classes for the two accordions, .horizontal and .vertical. I'll start off with the styling that will apply to both */
/* I'll remove the base styling from the ul and, in this case, center it on the page */
.accordion {
margin: 30px auto;
padding: 0;
list-style-type: none;
overflow: hidden; /* This will keep the slides from overflowing outside the accordion */
}
/* Now for the slides themselves */
.accordion li {
/* Remove any margins & paddings */
margin: 0;
padding: 0;
/* and hide the content when it overflows */
overflow: hidden;
/* Let's add a little drop shadow to each slide to give them a "layered effect" */
-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.3);
box-shadow: 0 0 15px rgba(0,0,0,0.3);
/* and now we'll add a transition to animate the switching between slides */
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all …

Css-only Lavalamp-like Fancy Menu Effect

Αντιγραφή τον παρακάτω κώδικα:

<style>
/* FoulsCode.blogspot.gr */
/* ---- reset ------*/
html, body, div, a {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }
html {
  line-height: 1; }

/* --- basic styles ----*/
body {
  font-family: "Unica One";
  font-size: 1.5em;
  background: #f2f2f2;
  text-shadow: 0 1px 0 white; }
/* --- for all three examples ----*/
.nav {
  text-align: center;
  overflow: hidden;
  margin: 2em auto;
  width: 480px;
  position: relative; }
  .nav a {
    display: block;
    position: relative;
float: left;
padding: 1em 0 2em;
    width: 25%;
text-decoration: none;
 color: #393939;
 -webkit-transition: .7s;
 -moz-transition: .7s;
 -o-transition: .7s;
 -ms-transition: .7s;
 transition: .7s; }
 .nav a:hover {
   color: #c6342e; }
.effect {
position: absolute;
  left: -12.5%;
  -webkit-transition: 0.7s ease-in-out;
  -moz-transition: 0.7s ease-in-out;
  -o-transition: 0.7s ease-in-out;
  -ms-transition: 0.7s ease-in-out;
  transi…