Kατεβάσετε την εφαρμογή android του blog! DownLoad

FoulsCode: 2011-17

Translate

Πρόσφατα Σχόλια

Σύνολο αναρτήσεων

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

Responsive and Mega menu

Written By Greek Port on Τετάρτη, 21 Ιουνίου 2017 | Ιουνίου 21, 2017





HTML:

<!--Google -Fonts-->
<link href='https://fonts.googleapis.com/css?family=Sintony:400,700&subset=latin-ext' rel='stylesheet' type='text/css'>

<!--Font-awsome-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<header>
<h2>Responsive Menu</h2>
</header>

<div class="xs-menu-cont">
<a id="menutoggle"><i class="fa fa-align-justify"></i> </a>
<nav class="xs-menu displaynone">
<ul>
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Contact</a>
</li>

</ul>
</nav>
</div>
<nav class="menu">
<ul>
<li class="active">
<a href="#">Home</a>
</li>
<li class="drop-down">
<a href="#">Products</a>
 
<div class="mega-menu fadeIn animated">
<div class="mm-6column">
<span class="left-images">
<img  src="https://4.bp.blogspot.com/-faF-AemPFUM/U4ryP7pQRsI/AAAAAAAAEvA/fZ-hskCSln4/s1600/Magento%2Bthemes.jpg">
<p>Most Popular Styles </p>
</span>
<span class="categories-list">
<ul>
<span>Computer</span>
<li>Desktops</li>
<li>Laptops</li>
<li>Tablets</li>
<li>Monitors</li>
<li>Networking Printers</li>
<li>Scanners</li>
<li>Jumpers & Cardigans</li>
<li><a class="mm-view-more" href="#">View more →</a></li>
</ul>
</span>

</div>
<div class="mm-3column">
<span class="categories-list">
<ul>
<span>TV & Video</span>
<li>LED TVs
<li>Plasma TVs
<li>3D TVs
<li>DVD & Blu-ray Players
<li>Home Theater Systems
<li>Cell Phones
<li>Apple iPhone
<li><a class="mm-view-more" href="#">View more →</a></li>
</ul>
</span>
</div>
<div class="mm-3column">
<span class="categories-list">
<ul>
<span>Car Electronics</span>
<li>GPS & Navigation</li>
<li>In-Dash Stereos</li>
<li>Speakers</li>
<li>Subwoofers</li>
<li>Amplifiers</li>
   <li>MP3 Players</li>
<li>iPods</li>
  <li><a class="mm-view-more" href="#">View more →</a></li>
</ul>
</span>
</div>
</div>
 
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Blog</a>

</li>
<li>
<a target="_blank" href="http://www.foulscode.com/">Contact</a>
</li>
         <li style="float:right;">
           <a href="http://www.foulscode/">Go my Blog</a>
          </li>

</ul>
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Αφού βάλετε τα στοιχεια σας στον κώδικα html είστε τιμή για πιο προχωρημένους να το προσαρμόσουν στα μετρα και στα χρώματα που θέλουν.


CSS:


body {
font-family: 'Sintony', sans-serif;
color: #e5e5e5;
font-size: 12px;
background: #bfbfbf;
line-height: 1;
}
*, *:before, *:after {
    box-sizing: border-box;
}
/** * Eric Meyer's Reset CSS v2.0 (https://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
header h2 {
margin: 25px 10px;
font-size: 28px;
text-align: center;
color: cornsilk;
}
.container {
margin: 10px auto;
display: table;
max-width: 1140px;
width: 100%;
}
.container:after, .container:before {
content: "" clear : both;
}
nav.menu {
background: coral;
position: relative;
min-height: 45px;
height: 100%;
}

.menu > ul > li {
list-style: none;
display: inline-block;
color: #fff;
line-height: 45px;

}
.menu > ul li a, .xs-menu li a {
text-decoration: none;
color: #fff;
display:block;
padding: 0px 24px;
}
.menu > ul li a:hover {
background:#444;
color: #fff;
transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
}
.active{
background:#444 !important;

}
.displaynone{
display: none;
}
.xs-menu-cont{
display:none;
}
.xs-menu-cont > a {
    background: none repeat scroll 0 0 #ff7f50;
    border-radius: 3px;
    padding: 3px 6px;
display: block;
border-bottom:1px solid #E67248;
   box-shadow: 0 1px 2px #e67248;
-webkit-box-shadow: 0 1px 2px #e67248;
-moz-box-shadow: 0 1px 2px #e67248;
}
.xs-menu-cont > a:hover{
 cursor: pointer;
}
  
.xs-menu li {
color: #fff;
padding: 14px 30px;
border-bottom: 1px solid #ccc;
background: #FF7F50;

}
.xs-menu  a{
text-decoration:none;
}

.mega-menu {
   background: none repeat scroll 0 0 #888;
    left: 0;
    margin-top: 3px;
    position: absolute;
    width: 100%;
padding:15px;
display:none;
transition-duration: 0.9s;
    
}
#menutoggle i {
    color: #fff;
    font-size: 33px;
    margin: 0;
    padding: 0;
}


/*--column--*/
.mm-6column:after, .mm-6column:before, .mm-3column:after, .mm-3column:before{
content:"";
display:table;
clear:both;


}
.mm-6column, .mm-3column {
 float: left;
 position: relative;
 }
.mm-6column {
    width: 50%;
}
.mm-3column {
        width: 25%;
}
.responsive-img {
    display: block;
    max-width: 100%;

}
.left-images{
margin-right:25px;
}
 .left-images, .left-categories-list {
   float: left;
}
.categories-list li {
    display: block;
    line-height: normal;
    margin: 0;
    padding: 5px 0;
}
.categories-list li :hover{
background:inherit !important;
}
.left-images > p {
    background: none repeat scroll 0 0 #ff7f50;
    display: block;
    font-size: 18px;
    line-height: normal;
    margin: 0;
    padding: 5px 14px;
}
.categories-list span {
    font-size: 18px;
    padding-bottom: 5px;
    text-transform: uppercase;
}
.mm-view-more{
background: none repeat scroll 0 0 #ff7f50;
    color: #fff;
    display: inline !important;
    line-height: normal;
    padding: 5px 8px !important;
margin-top:10px;
}
.display-on{
display:block;
 transition-duration: 0.9s;
}
.drop-down > a:after{
content:"\f103";
color:#fff;
font-family: FontAwesome;
font-style: normal;
margin-left: 5px;


}
 /*MediaQuerys*/
 @media (max-width: 600px) {
.menu {
 display:none;
 }
 .xs-menu li a {

padding:0px;
}
 .xs-menu-cont{
 display:block ;
 }
 }


/*Animation--*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}


JS:

$(document).ready(function() {
  //responsive menu toggle
  $("#menutoggle").click(function() {
    $(".xs-menu").toggleClass("displaynone");
  });
  //add active class on menu
  $("ul li").click(function(e) {
    e.preventDefault();
    $("li").removeClass("active");
    $(this).addCss("active");
  });
  //drop down menu
  $(".drop-down").hover(function() {
    $(".mega-menu").addClass("display-on");
  });
  $(".drop-down").mouseleave(function() {
    $(".mega-menu").removeClass("display-on");
  });
});




Ιουνίου 21, 2017 | 0 σχόλια | Διαβάστε περισσότερα

Clean login form with CSS

Written By Greek Port on Κυριακή, 21 Μαΐου 2017 | Μαΐου 21, 2017




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: -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, -webkit-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-color: #840b2a;
background: -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, -moz-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-color: #840b2a;
background: -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, -o-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-size: 1000px 1000px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 1000px 1000px;
background-color: #840b2a;
}

.login {
width: 300px;
height: 285px;
overflow: hidden;
background: #1e1e1e;
border-radius: 6px;
margin: 50px auto;
box-shadow: 0px 0px 50px rgba(0,0,0,.8);
}

.login .titulo {
width: 298px;
height: 14px;
padding-top: 13px;
padding-bottom: 13px;
font-size: 14px;
text-align: center;
color: #bfbfbf;
font-weight: bold;
background: #121212;
border: #2d2d2d solid 1px;
margin-bottom: 30px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
font-family: Arial;
}

.login form {
width: 240px;
height: auto;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}

.login form input[type=text], .login form input[type=password] {
width: 200px;
font-size: 12px;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 40px;
border: none;
color: #bfbfbf;
background: #141414;
outline: none;
margin: 0;
}
/* website: http://foulscode.com */
.login form input[type=text] {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-top: #0b0b0b solid 1px;
background: #141414 url(http://dev.dhenriquez.com/test-img/icons/111-user.png) 10px center no-repeat;
}

.login form input[type=password] {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: #0b0b0b 1px solid;
border-bottom: #353535 1px solid;
background: #141414 url(http://dev.dhenriquez.com/test-img/icons/54-lock.png) 10px center no-repeat;
}

.login form .enviar {
width: 240px;
height: 12px;
display: block;
padding-top: 14px;
padding-bottom: 14px;
border-radius: 6px;
border: none;
border-top: #4eb2a8 1px solid;
border-bottom: #161616 1px solid;
background: #349e92;
text-align: center;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #FFF;
text-shadow: 0 -1px #1d7464, 0 1px #7bb8b3;
font-family: Arial;
}

.login .olvido {
width: 240px;
height: auto;
overflow: hidden;
padding-top: 25px;
padding-bottom: 25px;
font-size: 10px;
text-align: center;
}

.login .olvido .col {
width: 50%;
height: auto;
float: left;
}

.login .olvido .col a {
color: #fff;
text-decoration: none;
font: 12px Arial;
}

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers greekport.gr */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }

body { line-height: 1 }

ol, ul { list-style: none }

blockquote, q { quotes: none }

blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

/* website: http://foulscode.com */
Μαΐου 21, 2017 | 0 σχόλια | Διαβάστε περισσότερα

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

Written By Greek Port on Παρασκευή, 12 Μαΐου 2017 | Μαΐου 12, 2017





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

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

SPRITES

Τα Sprites είναι μια ιδέα η οποία ήρθε από τα video games. Αυτή η ιδέα λέει, πως τοποθετούμε όλες τις μικρότερες εικόνες μέσα σε μία μεγαλύτερη, οργανωμένες σε κάποιο πλέγμα, και μετά με τη βοήθεια των CSS εμφανίζουμε μόνο ένα μικρότερο τμήμα αυτής της εικόνας μέσα σε ένα στοιχείο της HTML.
Για παράδειγμα, ας υποθέσουμε πως θέλουμε να δημιουργήσουμε στην σελίδα μας ένα σύνδεσμο που θα οδηγεί στην αρχική σελίδα. Επίσης ας υποθέσουμε πως θέλουμε αντί για κείμενο, ο σύνδεσμος μας να εμφανίζει ένα σπίτι ως εικόνα, και όταν περνάει το ποντίκι πάνω από το σύνδεσμο το σπίτι θα γίνετε κόκκινο.
Σε αυτή την περίπτωση υποθέτουμε πως έχουμε μόνο δυο εικόνες σε ολόκληρο το Sprite, και μοιάζει με αυτή που έχουμε παρακάτω:

Στο CSS μας, εμείς θα κάνουμε τον σύνδεσμο να εμφανίζεται σαν block ή σαν inline-block και θα του δώσουμε ως πλάτος το ένα δεύτερο του sprite.
Στη συνέχεια θα ορίσουμε ως φόντο την εικόνα του Sprite και θα θέσουμε το background-position να είναι στις θέσεις 0 και 0 αντίστοιχα. Με αυτή την ενέργεια μας θα εμφανίζουμε το γκρι σπίτι.
Τέλος, θα δημιουργήσουμε ακόμα ένα σύνολο μορφοποίησης για τον ίδιο σύνδεσμο που θα ενεργοποιείτε στο :hover, και θα αλλάξουμε τις ιδιότητες του background σε -28PX και 0 έτσι ώστε η εικόνα να κυλήσει προς τα αριστερά και να εμφανιστεί το κόκκινο σπίτι.
Από άποψη επιτάχυνσης, με αυτή την πολύ απλή τεχνική μπορέσαμε και μειώσαμε τα HTTP Requests στο ελάχιστο, όπως επίσης και το φόρτο εργασίας για τον Browser να δημιουργήσει τα κατάλληλα headings για τις εικόνες μας.
Ωστόσο υπάρχουν και μερικά μειονεκτήματα που σχετίζονται με τα sprites:


Δύσκολο να συντηρήσετε και να τα ενημερώσετε. Αν δεν διαθέτετε τα κατάλληλα εργαλεία, τότε η χειροκίνητη επεξεργασία και ο συνδυασμός των εικόνων είναι μια αρκετά δύσκολη εργασία.

Αυξάνει την κατανάλωση μνήμης: Αυτός είναι ένας παράγοντας που συχνά τον παραβλέπουμε. Για να εξοικονομήσουμε χρόνο παράδοσης τις εικόνας καταναλώνουμε περισσότερη μνήμη και επεξεργαστική ισχύς, ειδικά για τα μεγάλα sprites και τα sprites που έχουν πολύ καινό χώρο.

Τα Sprites που είναι αρκετά συμπυκνωμένα με ελάχιστο ή καθόλου καινό χώρο ανάμεσα στις εικόνες, υπάρχει μεγάλη πιθανότητα η μία εικόνα να εμφανίζεται δίπλα από μια άλλη.




DATA URI ΚΑΙ ΚΩΔΙΚΟΠΟΙΗΣΗ BASE64

Τα Data URI και τα κωδικοποιημένα δεδομένα με base64 πάνε χέρι χέρι. Με αυτή την τεχνική μπορείτε να ενσωματώσετε εικόνες μέσα σε ένα αρχείο HTML, CSS ή JavaScript.
Όπως ακριβώς συμβαίνει με τα Sprites, και με αυτή την τεχνική μειώνετε τα HTTP requests, αλλά και εδώ υπάρχουν προβλήματα:


Οι εικόνες που κωδικοποιούνται με base64 κωδικοποίηση, είναι κατά 33% μεγαλύτερες από ότι είναι το πραγματικό μέγεθος πηγαίου αρχείου. Αυτό πρακτικά σημαίνει πως πρέπει να μεταδώσουμε περισσότερα δεδομένα, κάτι που μπορεί να είναι επώδυνο για χρήστες κινητών τηλεφώνων.

Τα data URI δεν υποστηρίζονται στους IE6 και IE7

Τα δεδομένα που είναι κωδικοποιημένα με base64 ίσως να απαιτούν περισσότερο χρόνο για να επεξεργαστούν από τα απλά δυαδικά αρχεία. Και σε αυτή την περίπτωση, οι κινητές συσκευές ίσως να αντιμετωπίζουν προβλήματα λόγο της μικρής υπολογιστικής ισχύς που έχουν στη διάθεση τους και τις μικρής διαθέσιμης μνήμης.



Το «33% περισσότερα δεδομένα» είναι μια κοινά αποδεκτή τιμή, αν και το σύνολο των επιπλέον δεδομένων αλλάζει δραματικά από τύπο αρχείων σε τύπους αρχείων. Για το λόγο αυτό, προσπάθησα να κάνω κάποιες δοκιμές πάνω σε αυτό το κομμάτι.
Εδώ έχω μερικές ερωτήσεις που προέκυψαν πριν τις δοκιμές:


Μπορεί ένα base64 κωδικοποιημένο αρχείο συμπιεσμένο με gzip να έχει το ίδιο μέγεθος με το πρωτότυπο αρχείο;

Είναι η κωδικοποίηση base64 καλύτερη για μικρά αρχεία;

Είναι η κωδικοποίηση base64 καλύτερη για μικρά και απλά εικονίδια, ενώ δεν είναι καλή για εικόνες και φωτογραφίες;

Είναι η κωδικοποίηση base64 καλύτερη όταν πολλά αρχεία συνδυάζονται μαζί;



Επίσης μια από τις δοκιμές που ήθελα να κάνω είναι αν τελικά οι εικόνες που είναι συμπιεσμένες με Gzip έχουν σημαντική διαφορά από τις κανονικές εικόνες; Γνωρίζω πως η συμπίεση του κειμένου είναι πολύ αποδοτική με το Gzip, αλλά αξίζει να συμπιέζουμε τις εικόνες;
Για τα παραπάνω ερωτήματα πραγματοποίησα τρις δοκιμές. Μία με ένα σύνολο μικρών εικονιδίων, μια με ένα σύνολο μικρών φωτογραφιών, και μια με τις ίδιες φωτογραφίες σε μεγάλο μέγεθος.
Αν και οι δοκιμές μου δεν ήταν εκτενείς, τα αποτελέσματα μου έδειξαν πως πρέπει να προσέχουμε πότε θα χρησιμοποιούμε κωδικοποίηση base64.
Σημείωση για τους πίνακες που ακολουθούν. Οι πίνακες συγκρίνουν τη δυαδική μορφή (το πρωτότυπο αρχείο PNG ή JPEG) με την κωδικοποίηση base64 όπως αυτή εμφανίζεται σε ένα αρχείο CSS και σε σύγκριση.

ΠΡΩΤΗ ΔΟΚΙΜΗ

Πέντε PNG εικονίδια διαστάσεων 16 χ 16 από τη συλλογή «Fugue Icon Set»
[th]Αρχείο[/th][th]Δυαδικό[/th][th]Δυαδικό + GZip[/th][th]CSS + Base64[/th][th]CSS + Base64 + GZip[/th]

abacus 1443 B 1179 B 2043 B 1395 B
acorn 1770 B 1522 B 2478 B 1728 B
address-book-arrow 763 B 810 B 1153 B 948 B
address-book–exclamation 795 B 848 B 1199 B 988 B
address-book–minus 734 B 781 B 1113 B 919 B
Σύνολο 5505 B 5140 B 7986 B 5978 B
Συνδυασμένα αρχεία (5505 B) (4128 B) 7986 B 4423 B


*Όλοι οι αριθμοί αναπαριστούν bytes.
** Οι αριθμοί στις παρενθέσεις αναπαριστούν το πραγματικό μέγεθος σε πρακτικό επίπεδο. Δυστυχώς τα αρχεία δεν μπορούν να συνδυαστούν και να αποσταλούν στην δυαδική τους μορφή.
Συμπέρασμα:


Τα δυαδικά αρχεία είναι πάντα μικρότερα

Μερικές φορές το GZip κάνει τα αρχεία μεγαλύτερα

Η συμπίεση των base64 δεδομένων με Gzip φέρνει το μέγεθος των εικονιδίων, κοντά στο αρχικό τους μέγεθος, αλλά θα πρέπει να σημειωθεί πως σε αυτή την περίπτωση τα εικονίδια συμπιέζονται και αυτά με GZip. Τα συμπιεσμένα δυαδικά αρχεία με GZip είναι πάντα μικρότερα από τα συμπιεσμένα base64 δεδομένα

Τα συνδυασμένα αρχεία, μειώνουν δραματικά το μέγεθος



Πρακτικά, ο developer έχει δυο επιλογές, είτε να δώσει 5 ξεχωριστά αρχεία στον τελικό χρήστη με συνολικό μέγεθος 5140 bytes, ή να δώσει ένα αρχείο μεγέθους 4423 bytes.
Σε αυτή τη δοκιμή το base64 είναι ξεκάθαρα τα συνδυασμένα αρχεία που διανέμονται με κωδικοποίηση base64.

ΔΕΥΤΕΡΗ ΔΟΚΙΜΗ

Πέντε JPEG εικόνες από το Flickr μεγέθους 75 x 75.
[th]Αρχείο[/th][th]Δυαδικό[/th][th]Δυαδικό + GZip[/th][th]CSS + Base64[/th][th]CSS + Base64 + GZip[/th]

1 6734 B 5557 B 9095 B 6010 B
2 5379 B 4417 B 7287 B 4781 B
3 25626 B 18387 B 34283 B 20103 B
4 7031 B 6399 B 9491 B 6702 B
5 5847 B 4655 B 7911 B 5077 B
Σύνολο 50617 B 39415 B 68067 B 42673 B
Συνδυασμένα αρχεία (50617 B) (36838 B) 68067 B 40312 B


Συμπέρασμα


Οι μεμονωμένες εικόνες δεν είναι πολύ μεγαλύτερες όταν είναι κωδικοποιημένες με base64 και συμπιεσμένες με GZip.



Στην πράξη, ο developer μπορεί να δώσει 5 αρχεία με συνολικό μέγεθος 39415 bytes, ή να δώσει ένα αρχείο με μέγεθος 40312 bytes.
Σε αυτή τη δοκιμή δεν είχαμε μεγάλες διακυμάνσεις στο μέγεθος των αρχείων, οπότε σε τέτοιου μεγέθους εικόνες, μάλλον είναι προτιμότερη η αποστολή ενός μόνο αρχείου που θα έχει μέγεθος περίπου 40Kb.

ΤΡΙΤΗ ΔΟΚΙΜΗ

Πέντε JPEG εικόνες από το Flickr μεγέθους 240 x 160.
[th]Αρχείο[/th][th]Δυαδικό[/th][th]Δυαδικό + GZip[/th][th]CSS + Base64[/th][th]CSS + Base64 + GZip[/th]

1 24502 B 23403 B 32789 B 23982 B
2 20410 B 19466 B 27333 B 19954 B
3 43833 B 36729 B 58561 B 38539 B
4 31776 B 31180 B 42485 B 31686 B
5 21348 B 20208 B 28581 B 20761 B
Σύνολο 141869 B 130986 B 189749 B 134922 B
Συνδυασμένα αρχεία (141869 B) (129307 B) 189749 B 133615 B


Συμπέρασμα


Στις μεγαλύτερες εικόνες, τα συμπιεσμένα δυαδικά αρχεία και τα συμπιεσμένα δεδομένα με base64 φαίνεται να έχουν πολύ μικρές αποκλίσεις.



Σε αυτή την περίπτωση ο developer έχει την επιλογή να δώσει πέντε αρχεία συνολικού μεγέθους 130986 bytes ή να δώσει ένα συνδυασμένο αρχείο μεγέθους 133615 bytes.
Με την πρώτη ματιά, θα μπορούσαμε να πούμε πως η αποστολή μόνο ενός αρχείου είναι καλύτερη λύση, αλλά εδώ θα πρέπει να δώσουμε λίγη παραπάνω προσοχή.
Πιθανότατα να είναι προτιμότερο να δώσετε στον τελικό χρήστη τα πέντε αρχεία, παρά το ένα που περιέχει μέσα και τα πέντε.
Για ποιο λόγο όμως; Γιατί τα 133615 bytes είναι αρκετά για να τα στείλετε με μόνο ένα request στον τελικό χρήστη, ο οποίος μέχρι να παραλάβει αυτά τα bytes θα βλέπει μια καινή οθόνη. Αν τα δεδομένα είναι κωδικοποιημένα με base64 ο χρήστης δεν θα μπορεί να δει κάτι, μέχρι να παραλάβει ολόκληρο το πακέτο των κωδικοποιημένων δεδομένων.
Κάνοντας την σύγκριση, με τις πέντε μεμονωμένες εικόνες, οι οποίες πολύ πιθανών να μεταφερθούν παράλληλα θα δώσουν στον χρήστη μια ένδειξη ότι κάτι κατεβαίνει στον browser του, εμφανίζοντας του τμήματα της εικόνας καθώς αυτές κατεβαίνουν στον υπολογιστή του.
Αυτός είναι ένας λόγος για τον οποίο θα πρέπει να επιλέξετε να κατεβάσετε τις εικόνες με τον κλασικό τρόπο. Το ποιο πιθανό είναι οι εικόνες να κατέβουν παράλληλα στον υπολογιστή του χρήση και τελικά αυτό να μην προκαλέσει και μεγάλη αίσθηση καθυστέρησης.
Βάση τον δοκιμών που πραγματοποιήσαμε, η βέλτιστη λύση είναι να δημιουργήσετε ένα sprite με όλες τις εικόνες του UI της σελίδας σας, τις οποίες θα ενσωματώσετε στο CSS σας με κωδικοποίησης base64 και να αφήσετε τις υπόλοιπες εικόνες να μπουν στην cache του browser με τις συνηθισμένες τεχνικές.

via: web-resources.eu
Μαΐου 12, 2017 | 0 σχόλια | Διαβάστε περισσότερα

Animated popup menu

Written By Greek Port on Κυριακή, 1 Ιανουαρίου 2017 | Ιανουαρίου 01, 2017



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

Ένα καταπληκτικό 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);
    -ms-transform: scale(2);
    transform: scale(2);
    -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 li {
    display: inline-block;
    margin: 20px;
}

#menu li a {
    border-radius: 3px;
    padding: 15px;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 18px;
    color: #fff;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
 /* www.foulscode.com */
#menu li a:hover { border-color: #fff; }

#menu li a i {
    margin-right: 5px;
    font-size: 24px;
}

#toggle-nav-label {
    color: #fff;
    background: rgba(0,0,0,0.2);
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 500;
    width: 100px;
    height: 30px;
    border-radius: 5px;
}

#toggle-nav { display: none; }

#toggle-nav:checked ~ .box {
    opacity: 1;
    z-index: 400;
}

#toggle-nav:checked ~ .box ul {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

#toggle-nav:checked ~ #toggle-nav-label {
    background: #fff;
    color: rgba(0,0,0,0.8);
}

#content { margin: 20px 0px 20px 0px; }

#content h1 {
    margin-bottom: 20px;
    font-size: 30px;
}

#content p {
    font-size: 14px;
    /* www.foulscode.com */
</style>
<header id="head">
  <div class="container">
  <nav id="menu">
             
    <input type="checkbox" id="toggle-nav"/>
    <label id="toggle-nav-label" for="toggle-nav">
    <i class="icon-reorder">Меню</i></label>
             
    <div class="box">
    <ul>
    <li><a href="URL"><i class="icon-home"></i>
TEXT</a></li>
    <li><a href="
URL"><i class="icon-file-alt"></i>TEXT</a></li>
    <li><a href="URL"><i class="icon-copy"></i>TEXT</a></li>
    <li><a href="URL"><i class="icon-envelope"></i>TEXT</a></li>
    </ul>
    </div>          
  </nav>
  </div>
</header>

<!-- start content -->
    <section id="content">
        <div class="container">
           
<!-- end content -->

LIVE DEMO
Ιανουαρίου 01, 2017 | 0 σχόλια | Διαβάστε περισσότερα

Pure Css Ribbon Header

Written By Greek Port on Δευτέρα, 15 Ιουνίου 2015 | Ιουνίου 15, 2015




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

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


<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 */
}
.ribbon:after {
border-color: #138a72 transparent #138a72 #138a72; /* bg color for right side of ribbon */
right: -45px;
left: auto;
}
/* foulscode.blogspot.com */
</style>
<!--h-->  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 
<!--h-->  <style type="text/css">
<!--h-->  </style>
<br>
<!--h--><div id="header" class="ribbon">
<!--h-->             <h1><a>Pure CSS Ribbon Header</a></h1>
<!--h-->         </div>


DEMO


Και αφού αντικαταστήσετε το κείμενο που θέλετε είστε έτοιμοι.
Ιουνίου 15, 2015 | 0 σχόλια | Διαβάστε περισσότερα

CSS Rolling Menu

Written By Greek Port on Σάββατο, 17 Ιανουαρίου 2015 | Ιανουαρίου 17, 2015



Ένα όμορφο 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-spacing:-1px; text-transform:capitalize; text-shadow:0 2px 2px rgba(0,0,0,0.6); }

    ul{ background-color:rgba(0,0,0,0.4); border-bottom:1px solid rgba(255,255,255,0.25); box-shadow:0 0 8px rgba(0,0,0,0.4) inset; border-radius:16px; margin:0; padding:0 30px; }
    ul li a{ letter-spacing:-1px; text-decoration:none; text-transform:uppercase; color:#FFF; }

    /* The effect */
    ul{ display:inline-block; text-align:center; height:50px; overflow:hidden; }
        ul li{ float:left; height:100%; list-style:none; margin:0 30px; }
            ul li *{ display:inline-block; font-size:1.3em; line-height:50px; }
            ul li a{ margin-top:-50px; transition:0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4); }
            ul li a:hover{ margin-top:0; }
            ul li a:before{ content:attr(data-text); display:block; color:#CDF745; }
/* foulscode.blogspot.com */
</style>
<h1>CSS menu with rolling</h1>
<ul>
    <li><a data-text='CSS' href="URL">CSS</a></li>
    <li><a data-text="HTML" href="URL">HTML</a></li>
    <li><a data-text="Javascript" href="URL">JavaScript</a></li>
    <li><a data-text="About" href="URL">About</a></li>
</ul>


DEMO
Ιανουαρίου 17, 2015 | 0 σχόλια | Διαβάστε περισσότερα

checkbox styling in css

Written By Greek Port on Σάββατο, 10 Ιανουαρίου 2015 | Ιανουαρίου 10, 2015



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="checkbox" >
    <label>Option 2</label>
  </div>
</div>

<div class="modal-4">
  <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>


CSS:

*, *:after, *:before{
      box-sizing:border-box;
    -ms-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
body{text-align:center; background:#efefef}
h1{font-family:arial; color:#12B555}

.inline{
  display: inline-block;
}
.inline + .inline{
  margin-left:10px;
}
[class*="modal"]{
  margin:25px ;
}
/*==================================*/

.checkbox{
  color:#999;
  font-size:15px;
  position:relative;
}
.checkbox label{
  position:relative;
   padding-left:20px;
}
.checkbox label:before{
    background:#acb5ba;
    content: "";
    height: 15px;
    left: 0;
    position: absolute;
    top: 1px;
    width: 15px;
  border-radius:4px;
}
.checkbox label:after{
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    content: "";
    height: 9px;
    left: 6px;
    position: absolute;
    top: 3px;
    width: 4px;
    transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}
.checkbox input[type="checkbox"]{
   cursor: pointer;
  position:absolute;
  width:100%;
  height:100%;
  z-index: 1;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}
.checkbox input[type="checkbox"]:hover + label:after{
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   border-color:#999;
}
.modal-1 .checkbox input[type="checkbox"]:hover + label:after{
   border-color:#fff;
}
.checkbox input[type="checkbox"]:checked + label:after,  .checkbox input[type="checkbox"]:checked + label:before{
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.checkbox input[type="checkbox"]:checked + label:before{
  background:#12B555;
}
.checkbox input[type="checkbox"]:checked + label{
  color:#12B555;
}

/*===== Modal 2 ====*/

.modal-2 .checkbox label:before{
  background:none;
  border:2px solid;
}
.modal-2 .checkbox input[type="checkbox"]:checked + label:before, .modal-2 .checkbox input[type="checkbox"]:checked + label:after{
  background:none;
   border-color:#12B555;
}

/*===== Modal 3 ====*/

.modal-3 .checkbox label:before{
  background:none;
  border:2px solid;
  border-radius:100%; -moz- border-radius:100%; -webkit- border-radius:100%;
}
.modal-3 .checkbox label:after{
  width:6px;
  height:15px;
  top:-3px;
  left:8px
}
.modal-3 .checkbox input[type="checkbox"]:checked + label:before, .modal-3 .checkbox input[type="checkbox"]:checked + label:after{
  background:none;
   border-color:#12B555;
}

/*===== Modal 4 ====*/

.modal-4 .checkbox label:before{
  background:none;
  border:2px solid;
  border-radius:0; -moz- border-radius:0; -webkit- border-radius:0;
}
.modal-4 .checkbox label:after{
  width:6px;
  height:15px;
  top:-3px;
  left:8px
}
.modal-4 .checkbox input[type="checkbox"]:checked + label:before, .modal-4 .checkbox input[type="checkbox"]:checked + label:after{
  background:none;
   border-color:#12B555;
}



Ιανουαρίου 10, 2015 | 0 σχόλια | Διαβάστε περισσότερα

CSS Spotlight Menu

Written By Greek Port on Δευτέρα, 16 Δεκεμβρίου 2013 | Δεκεμβρίου 16, 2013



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.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.spotlightmenu li:hover a{
color: white;
background: #a71b15; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}
.spotlightmenu li a span{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}
/* foulscode.blogspot.gr */
</style>
<div class="spotlightmenu">
<ul>
<li><a href="http://foulscode.blogspot.gr/search/label/Menu"><span>Home</span></a></li>
<li><a href="http://foulscode.blogspot.gr/search/label/Menu"><span>DHTML</span></a></li>
<li><a href="http://foulscode.blogspot.gr/search/label/Menu"><span>CSS</span></a></li>
<li><a href="http://foulscode.blogspot.gr/search/label/Menu"><span>Forums</span></a></li>
<li><a href="http://foulscode.blogspot.gr/search/label/Menu"><span>JavaScript</span></a></li>
</ul>
</div>




LIVE DEMO


Αντικαταστήστε τα urls και τους τίτλους με τα δικά σας και είσατε έτοιμοι!
Δεκεμβρίου 16, 2013 | 0 σχόλια | Διαβάστε περισσότερα

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

Written By Greek Port on Κυριακή, 1 Δεκεμβρίου 2013 | Δεκεμβρίου 01, 2013



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 αρχείο αυτό είναι κενό, ας τοποθετήσουμε μέσα τον βασικό κώδικα που πρέπει να έχει κάθε ιστοσελίδα μας.


<!DOCTYPE html>
<html>
<head>
meta charset = 'UTF-8'/>
<title>Html Tabs Tutorial</title>
</head>

<body>
The content of the document......
</body>

</html>


έτοιμο…Ας δούμε λίγο τώρα πριν ξεκινήσουμε τον κώδικα τι είναι αυτό που θέλουμε να φτιάξουμε, έστω στο περίπου.

Τι θέλουμε να φτιάξουμε; (εικόνα) 




Βλέποντας την εικόνα καταλαβαίνουμε απλά ότι μπορούμε να έχουμε ένα μικρό μενού με 2 links , tab1 και tab2 και όταν τα κλικάρουμε θα αλλάζει το περιεχόμενο από κάτω.Ας ξεκινήσουμε να το δημιουργούμε……



Δημιουργώντας το οριζόντιο μενού..

Σε αυτό το κομμάτι θα γράψουμε και Html και CSS κώδικα οπότε να είστε προσεχτικοί. Ξεκινώντας με HTML κώδικα στο αρχείο tabs.html γράφουμε μεταξύ των <body></body> το μενού μας, το οποίο θα αποτελείται από 2 links, το tab1 και το tab2. Ένα μενού στην HTML μπορεί και είναι καλό να γίνεται με την χρήση της unordered list tag.Ας το δούμε:

<!--Το μενού μας-->
<ul>
   <li><a href="#">Tab 1</li>
   <li><a href="#">Tab 2</li>
</ul>
Ας δούμε ένα στιγμιότυπο…



Όπως βλέπουμε δημιουργήσαμε το μενού μας, και στην συνέχεια θα του δώσουμε στυλ με CSS για να μοιάζει με αυτό στο σκίτσο…:)Ας το κάνουμε..Μέσα στα <head> ανοίγουμε μία ‘style’ tag και ξεκινάμε να γράφουμε το CSS… Δείτε σχόλια στον κώδικα για ότι δεν καταλαβαίνετε.. :) Επίσης έχω περιβάλλει το menu μας σε μία container div .Δείτε όλο τον κώδικα μέχρι στιγμής.


<!DOCTYPE html>
<html>
<head>
<meta charset = 'UTF-8'/>
<title>Html Tabs Tutorial</title>
<style>
/*Εδώ κάνουμε ένα CSS reset εξαιρετικά απλό.
Μηδενίζουμε το margin και το padding σε όλα τα HTML ELEMENTS στην σελίδα.
*/
   *{
      margin:0;
      padding:0;
      }

/*To CSS για το container μας**/
   #container{
   width:700px;
   margin:100px auto; /*Εδώ κεντράρουμε την container div σε σχέση με τη σελίδα μας και της δίνουμε 100px απόσταση από την κορυφή.*/
   }

/*
Ας ρυθμίσουμε και το CSS για το μενού μας.
*/
   ul{
        height:30px;
       line-height:15px; /*Μεταφέρει το κείμενο του link Στη μέση του ύψους του height δηλαδή, στα 15px.*/
       overflow:hidden;

      }  
/*Δίνουμε στυλ σε κάθε li item*/    
     ul li{
         display:block;
         float:left; /*Βάζει τα links οριζόντια.*/
         background:#000;
         color:#fff;
         text-decoration:none;
         margin:0 3px 0 0; /*Πάνω-δεξιά-κάτω-αριστερά.*/
         padding:10px 50px 10px 50px;
         list-style-type:none;
         }  
   ul li a{
            color:#fff;
            text-decoration:none; /*Αφαιρεί την γραμμή υπογράμμισης του Link.*/
            }  
   ul li a:hover{
               text-decoration:underline; /*Όταν κάνουμε hover πάνω από το link τότε να εμφανίζεται η υπογράμμιση.*/        
               }        
   .clear {
            clear:both; //Καθαρίζει τα floats των link.
      }
   #contentContainer{

            height:400px;
            overflow:hidden;
            border:1px solid #000;
      }  

</style>

</head>

<body>
<!--Το μενού μας-->
<div id="container">
   <ul>
      <li><a href="#">Tab 1</a></li>
      <li><a href="#">Tab 2</a></li>
   </ul>
     <div class="clear"></div>
    <div id="contentContainer">
    bla bla.
    </div>
</div>

</body>

</html>

Ας δούμε ένα στιγμιότυπο:



Δημιουργώντας το contentContainer
Δεν έχουμε τελειώσει με το μενού μας ακόμα αλλά τα υπόλοιπα θα τα κάνουμε όταν πλέον γράψουμε jQuery.Εδώ θα κάνουμε την δημιουργία του περιέκτη του περιεχομένου των tabs.Τι εννοώ; Ότι θα δημιουργήσουμε ένα container το οποίο θα περιέχει ουσιαστικά τα περιεχόμενα και των δύο tabs.Ας δούμε πώς θα το κάνουμε αυτό.
Δείτε τον κώδικα για σχόλια..
To HTML είναι :

<div id="contentContainer">
Tab contents.....
</div>

Και το css είναι:

#contentContainer{

height:200px;
overflow:hidden;/*Να μην είναι τα περιεχόμενα ψηλότερα από 400px.Στο πλάτος θα κοπούν και από το overflow:hidden του συνολικού container μας.*/
border:1px solid #000;
}

Ας δούμε ένα στιγμιότυπο…



Δημιουργώντας τα tabs μέσα στο contentContainer.

Τα jQuery tabs θα είναι ουσιαστικά 2 divs με id το καθένα το όνομα της tab.Επίσης σε κάθε tab θα δώσουμε μία κλαση που θα την χρησιμοποιήσουμε μετά στο jQuery..
Ας δούμε λίγο τον κώδικα…Μέσα στο “contentContainer” γράφουμε….


<!--Tab 1 Contents-->      <div id="tab1" class="tabcontents">      <p>      The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.       </p>       </div>      <!--Tab 2 Contents -->      <div id="tab2" class="tabcontents">      <p>      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.      </p>       </div>


Αν προσθέσουμε και ένα padding 10px:


.tabcontents{
      padding:10px;    
   }


Ας δούμε ένα στιγμιότυπο…


Πριν την jQuery…
Υπάρχει κάτι που δεν έχουμε κάνει ακόμα…Το μενού μας έχει 2 links τα οποία και να τα πατάμε δεν κάνουν κάτι.Το οποίο είναι λογικό.Αυτό που θα κάνουμε είναι να δώσουμε στο κάθε link ένα “προορισμό” , ώστε όταν το πατάμε να βλέπουμε ποια tab θέλουμε να δούμε.Θα χρησιμοποιήσουμε λοιπόν μία anchor tag σε κάθε link..Θα μας χρησιμεύσει αυτό με την jQuery.Μην ξεχνάτε ότι πρέπει το script που θα γράψουμε να καταλαβαίνει ποια tab είναι ενεργή και αυτό θα το παίρνει από το link…Αυτό γίνεται ως εξής..

<ul>
   <li><a href="#tab1">Tab 1</a></li>
   <li><a href="#tab2">Tab 2</a></li>
</ul>


Ας δούμε στιγμιότυπο και να κλικάρουμε στο link της tab2.Αφού το κάνετε δείτε το url….



Εφαρμόζοντας jQuery στις tabs μας…
Έφτασε η ώρα της jQuery..Το πρώτο πράγμα που χρειάζεται είναι να ενσωματώσουμε την jQuery βιβλιοθήκη αυτή καθ εαυτή στην ιστοσελίδα μας.Αυτό μπορεί να γίνει με την χρήση των google libraries, και συγκεκριμένα μπορούμε να φέρουμε το επόμενο link στο head μας.Δείτε τον κώδικα…

<head>
<meta charset = 'UTF-8'/>
<title>Html Tabs Tutorial</title><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>......


Γράφοντας το jQuery script.

Το τελευταίο πράγμα που θα κάνουμε είναι η δημιουργία ενός πολύ απλού jQuery script που θα ελέγχει την εμφάνιση των tabs ανάλογα με το link που πατάμε..Θα το γράψουμε στο head μας μέσα σε ‘script’ tags.


<script type="text/javascript">
   jQuery(document).ready(function(){
 
   //Εδώ θα γράψουμε το script..
 
   });
</script>
//Προσοχή.Ο κώδικας του script μας θα είναι ανάμεσα στην document.ready function η οποία ουσιαστικά θα τον εκτελέσει αφού έχει φορτώσει πλήρως η σελίδα μας....


Εν συνεχεία γράφω το script.Προσέξτε τα σχόλια και θα το καταλάβετε.Αντί για το ‘$’ χρησιμοποιούμε το ‘jQuery’.


<script type="text/javascript">
   jQuery(document).ready(function(){
 
      jQuery('.tabcontents').hide(); //Κρύψε όλες τις divs με αυτήν την class.
      jQuery('.tabcontents:first').show(); //Δείξε την πρώτη div με την class tabcontents.
     
      jQuery("#container a").click(function(){
      var activeTab = jQuery(this).attr("href"); //Εδώ τοποθετούμε στην μεταβλητή activeTab την ενεργή tab.Παίρνουμε από το link που πατάμε
      //το href attribute δλδ αν πατήσουμε το tab 1 link θα πάρουμε "#tab1".
      jQuery(".tabcontents").hide(); // Κρύβουμε πάλι τα περιεχόμενα των tabs.
      jQuery(activeTab).fadeIn(); //Εδώ βρίσκει την div από την activeTab και την εμφανίζει .Βασικά αυτός είναι ο λόγος που στα Links
      //χρησιμοποιούμε #tab1 για την div με id=tab1..με το
   
      return false; //Αυτό το κάνουμε για να μην "κλωτσάει προς τα πάνω η οθόνη όταν πατάμε το link.
});
 
   });


</script>



LIVE DEMO


ΠΗΓΉ
Δεκεμβρίου 01, 2013 | 0 σχόλια | Διαβάστε περισσότερα
 
berita unik