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

Αναρτήσεις

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

Clean login form with CSS

DEMO

HTML:

ΚΩΔΙΚΑΣ:



<section class="login">
<div class="titulo">Staff Login FoulsCode.com</div>
<form action="#" method="post" enctype="application/x-www-form-urlencoded">
<input type="text" required title="Username required" placeholder="Username" data-icon="U">
<input type="password" required title="Password required" placeholder="Password" data-icon="x">
<div class="olvido">
<div class="col"><a href="#" title="Ver Carásteres">Register</a></div>
<div class="col"><a href="#" title="Recuperar Password">Fotgot Password?</a></div>
</div>
<a href="#" class="enviar">Submit</a>
</form>
</section>

CSS:

ΚΩΔΙΚΑΣ:

/* website: http://foulscode.com */

body {
background: -w…

Πότε να χρησιμοποιήσω εικόνες κωδικοποιημένες με base64;

Δεν έχει περάσει πολύς καιρός από τότε που ο Steve Souders, άρχισε να αναφέρεται στην βελτίωση απόδοσης για τις ιστοσελίδες, και από τότε θεωρούμε δεδομένο πως κάθε επιπλέον HTTP request επιβαρύνει όλο και περισσότερο την απόδοση της ιστοσελίδας μας.

Η λύση που έχει δοθεί, είναι ο συνδυασμός κοινών τύπων αρχείων σε ένα μόνο αρχείο. Πρακτικά αυτό σημαίνει, πως όλα τα αρχεία JavaScript θα πρέπει να ενσωματωθούν σε ένα μόνο αρχείο, τα αρχεία CSSνα ενσωματωθούν σε μόνο ένα αρχείο CSS, κάτι που είναι κοινά κατανοητό και που μπορεί ο καθένας μας να το κάνει.
Το πραγματικό πρόβλημα ήταν με τις εικόνες. Πως μπορούσαμε να τις βάλουμε όλες σε ένα αρχείο, ή πως θα μπορούσαμε να τις ενώσουμε όλες μαζί; Η απάντηση δόθηκε με τα Sprites.

SPRITES

Τα Sprites είναι μια ιδέα η οποία ήρθε από τα video games. Αυτή η ιδέα λέει, πως τοποθετούμε όλες τις μικρότερες εικόνες μέσα σε μία μεγαλύτερη, οργανωμένες σε κάποιο πλέγμα, και μετά με τη βοήθεια των 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…