Css3: Side Bar Ads Example

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Css3: Side Bar Ads Example

Δημοσίευση από Joakim » 29 Μάιος 2011 02:09

Καλησπέρα, θα ήθελα την γνώμη σας για το ακόλουθο Sidebar. Μπορείτε να το δείτε και να το κατεβάσετε στα ακόλουθα links

Κώδικας: Επιλογή όλων

#ad{
	/*Position ans Size*/
	width:90px;
	height:90px;
	margin: 0 0px 30px 0;
	
	
	/*Redius*/
	border:none 0px #ffffff;
	-moz-border-radius-topleft: 45px;
	-moz-border-radius-topright:0px;
	-moz-border-radius-bottomleft:0px;
	-moz-border-radius-bottomright:45px;
	-webkit-border-top-left-radius:45px;
	-webkit-border-top-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-webkit-border-bottom-right-radius:45px;
	border-top-left-radius:45px;
	border-top-right-radius:0px;
	border-bottom-left-radius:0px;
	border-bottom-right-radius:45px;
	
}
.red{
	background-color:#e42b2b;
	float:left;
}

.orange{
	background-color:#ff8400;
	float:right;
}
.violet{
	background-color:#a800ff;
	float:left;
}
.blue{
	background-color:#49a7f3;
	float:right;
}
.green{
	background-color:#41d05f;
	float:right;
}


#ad:hover{
	-moz-border-radius-topleft: 25px;
	-moz-border-radius-topright:0px;
	-moz-border-radius-bottomleft:0px;
	-moz-border-radius-bottomright:25px;
	-webkit-border-top-left-radius:25px;
	-webkit-border-top-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-webkit-border-bottom-right-radius:25px;
	border-top-left-radius:25px;
	border-top-right-radius:0px;
	border-bottom-left-radius:0px;
	border-bottom-right-radius:25px;

}
Live Demo / Download

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Css3: Side Bar Ads Example

Δημοσίευση από dimsis » 30 Μάιος 2011 11:09

Ωραίο εφέ.
Να δούμε πότε θα υποστηρίζονται τα radius από όλους τους browsers χωρίς να χρειάζεται διαφορετικές εντολές στα css μας όμως.

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Css3: Side Bar Ads Example

Δημοσίευση από Joakim » 30 Μάιος 2011 17:26

dimsis ri3e kai mia matia se afto, nomizo tha sou aresei perissotero, fysika den ine etoimo gia download alla ok

http://www.jliassides.com/examples/Mous ... _sidebar2/

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Css3: Side Bar Ads Example

Δημοσίευση από dimsis » 31 Μάιος 2011 10:49

.flip:hover{
-webkit-transform-style: preserve-3d;
-webkit-transition:0.8s linear;
-webkit-transform:rotateY(360deg);
}
?
δεν παίζει σε firefox και ie αυτό, μόνο σε chrome (λογικά και σε safari).

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Css3: Side Bar Ads Example

Δημοσίευση από Joakim » 31 Μάιος 2011 19:08

yep i know dimsis... απλά ένα example ειναι :P για το τι θα μπορούσε να είναι το web με χρήση CSS3

Άβαταρ μέλους
Pantso
Δημοσιεύσεις: 67
Εγγραφή: 29 Μαρ 2010 16:49
Τοποθεσία: Athens, Greece
Επικοινωνία:

Css3: Side Bar Ads Example

Δημοσίευση από Pantso » 01 Ιουν 2011 12:51

Συγνώμη που θα το πώ, αλλά το markup σου είναι τελείως invalid ! Έχεις το ίδιο ID πολλές φορές. Επίσης έχεις βάλει H1 μέσα σε P, τα tags των images δεν κλείνουν, δεν βάζεις alt κτλ. Γενικά πρίν αρχίσει κάποιος να πειραματίζεται με CSS καλό είναι μάθει και σωστή HTML. Ελπίζω να μην το πάρεις προσωπικά :D

Αυτό το εφέ δεν είναι και εδώ ? http://css-tricks.com

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Css3: Side Bar Ads Example

Δημοσίευση από Joakim » 01 Ιουν 2011 18:44

Hello Pantso...


Μήπως σου ξεφεύγει το γεγονός ότι είναι ένα ΑΠΛΟ Example?! – και δεν είχε προορισμό να διδάξει κάποιον που ξέρει όπως εσύ ή όποιον άλλο γνωρίζει. Επίσης στον τίτλο γράφει CSS, άρα καλό θα ήταν να ασχολιόσουν με τον κώδικα που έχω αναρτήσει και όχι γενικά.
Φιλικά πάντα

Άβαταρ μέλους
Khronos
Δημοσιεύσεις: 754
Εγγραφή: 11 Δεκ 2006 14:43
Τοποθεσία: Ηράκλειο

Css3: Side Bar Ads Example

Δημοσίευση από Khronos » 01 Ιουν 2011 20:02

Ναι αλλά αυτοί που δεν ξέρουν, γιατί να μη μάθουν σωστά αφού θα δουν και τον υπόλοιπο κώδικα σου?

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Css3: Side Bar Ads Example

Δημοσίευση από Joakim » 01 Ιουν 2011 20:05

Συμφωνώ απόλυτα μαζί σου. Γι’αυτό και το κατέβασα για να το διορθώσω, έτσι ώστε να είναι και ο html κώδικας σωστός, μαζί με περισσότερα σχόλια.

Άβαταρ μέλους
Pantso
Δημοσιεύσεις: 67
Εγγραφή: 29 Μαρ 2010 16:49
Τοποθεσία: Athens, Greece
Επικοινωνία:

Css3: Side Bar Ads Example

Δημοσίευση από Pantso » 02 Ιουν 2011 14:39

Joakim έγραψε:Συμφωνώ απόλυτα μαζί σου. Γι’αυτό και το κατέβασα για να το διορθώσω, έτσι ώστε να είναι και ο html κώδικας σωστός, μαζί με περισσότερα σχόλια.
Μα βρε δε σου είπα τίποτα ! Δικός σου κώδικας είναι ότι θέλεις κάνεις :P ! Απλά περισσότερο σαν μια παρατήρηση το είπα :D

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Css3: Side Bar Ads Example

Δημοσίευση από korgr » 02 Ιουν 2011 18:22

Τα errors που δεν επηρεάζουν την εμφάνιση και λειτουργικότητα ενός site (στους last major browsers) είναι «να 'χαμε να λέγαμε» :P

Άβαταρ μέλους
Pantso
Δημοσιεύσεις: 67
Εγγραφή: 29 Μαρ 2010 16:49
Τοποθεσία: Athens, Greece
Επικοινωνία:

Css3: Side Bar Ads Example

Δημοσίευση από Pantso » 02 Ιουν 2011 18:28

korgr έγραψε:Τα errors που δεν επηρεάζουν την εμφάνιση και λειτουργικότητα ενός site (στους last major browsers) είναι «να 'χαμε να λέγαμε» :P
Τα δομικά errors στην HTML όμως επηρεάζουν το SEO της ιστοσελίδας ;) Άσε που οι mobile browsers ίσως σπάνε

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Css3: Side Bar Ads Example

Δημοσίευση από korgr » 02 Ιουν 2011 20:14

Δεν είδα του φίλου, απλά μιλάω για κάποιους που δίνουν βάση στον validator

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες