Port.forumgreek.com
Θέλετε να αντιδράσετε στο μήνυμα; Φτιάξτε έναν λογαριασμό και συνδεθείτε για να συνεχίσετε.

Isometric Angle Text Using CC3

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

Port Admin
Port Admin
Admin
Αριθμός μηνυμάτων : 2651
Πόντοι : 6380
Ημερομηνία εγγραφής : 06/03/2017
https://port.forumgreek.com

ΔημοσίευσηPort Admin Τετ Αυγ 30, 2017 1:46 am

[Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]

HTML:

Κώδικας:
<h1>GreekPort.gr</h1>
<p>
  GreekPort.gr of my original CSS3
   Isometric Text demo, this version improves
   on the first attempt by using the CSS :after
   selector to duplicate the title to create
   the shadow - in fact the title IS the shadow
   &amp; the Isometric lettering is the :after
   content.
</p>

CSS:

Κώδικας:
/**
 * CSS3 Isometric Text Demo v2
 */greekport.gr
@font-face {
   font-family: 'LeagueGothicRegular';
   src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.eot');
   src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.eot?iefix') format('eot'), url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.woff') format('woff'), url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.ttf') format('truetype'), url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.svg#webfontIQSKTUY8') format('svg');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'ArchitectsDaughterRegular';
   src: url('http://www.midwinter-dg.com/blog_demos/css-isometric-text/architectsdaughter-webfont.eot');
   src: url('http://www.midwinter-dg.com/blog_demos/css-isometric-text/architectsdaughter-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.midwinter-dg.com/blog_demos/css-isometric-text/architectsdaughter-webfont.woff') format('woff'), url('http://www.midwinter-dg.com/blog_demos/css-isometric-text/architectsdaughter-webfont.ttf') format('truetype'), url('http://www.midwinter-dg.com/blog_demos/css-isometric-text/architectsdaughter-webfont.svg#ArchitectsDaughterRegular') format('svg');
   font-weight: normal;
   font-style: normal;
}

body {
   width: 1000px;
   color: #fff;
   position: relative;
   background-color: #2f5faf;
   background-image: url(http://www.midwinter-dg.com/blog_demos/css-isometric-text/blueprint.png);
   -webkit-font-smoothing: antialiased;
}

h1 {
   font: 80px 'LeagueGothicRegular';
   position: relative;
   top: -30px;
   left: 100px;
   color: rgba(0,0,0,0);

   -webkit-transform: skew(63deg,-26.6deg);
   -moz-transform: skew(63deg,-26.6deg);
   -o-transform: skew(63deg,-26.6deg);
   -ms-transform: skew(63deg,-26.6deg);
   transform: skew(63deg,-26.6deg);
   text-shadow: 0 0 3px rgba(0, 0, 128, 0.25);
   z-index: 50;
}

h1:after {
   content: "ISOMETRIC TEXT";
   position: absolute;
   top: 15px;
   left: 25px;
   color: rgba(255,255,255,1);

   -webkit-transform: skew(-63deg) scale(1,.5);
   -moz-transform: skew(-63deg) scale(1,.5);
   -o-transform: skew(-63deg) scale(1,.5);
   -ms-transform: skew(-63deg) scale(1,.5);
   transform: skew(-63deg) scale(1,.5);
   text-shadow: -1px -1px 1px #aaa, -2px -2px 1px #999, -3px -3px 1px #888, -4px -4px 1px #777, -5px -5px 1px #666, -6px -6px 1px #555, -7px -7px 5px rgba(0, 0, 128, 0.75);
   z-index: 100;
}

p {
   width: 460px;
   height: 220px;
   position: absolute;
   top: 180px;
   left: 430px;
   font: 14px/24px 'ArchitectsDaughterRegular';
   color: rgba(255,255,255,.35);
   text-align: center;

   -webkit-transform: skew(63deg,-26.6deg);
   -moz-transform: skew(63deg,-26.6deg);
   -o-transform: skew(63deg,-26.6deg);
   -ms-transform: skew(63deg,-26.6deg);
   transform: skew(63deg,-26.6deg);
   position: absolute;
   z-index: 50;
}

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή

Παρόμοια θέματα

Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε

Προκειμένου να απαντήσετε πρέπει να είστε μέλος.

Δημιουργία Λογαριασμού

Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!


Δημιουργία ενός νέου Λογαριασμού

Σύνδεση

Έχετε ήδη έναν λογαριασμό; Κανένα πρόβλημα, συνδεθείτε εδώ.


Σύνδεση

 
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης