Μη Συνδεδεμενος Παρακαλώ συνδεθείτε ή εγγραφείτε

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω  Μήνυμα [Σελίδα 1 από 1]

#1
 Admin

avatar
Admin


HTML:

Κώδικας:
<!-- Let's make a MacBook Pro icon. We will keep it semantic by only using a single element. I'm not a big fan of using additional elements for styling purposes. -->

<i class="macbook"></i>

<!-- Right, that was easy! On to the styling -->

CSS:

Κώδικας:
html {
   background-image: linear-gradient(#8b9da9, #fff6e4);
   box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
   min-height: 100%;
}

/* Now we have a basic shape to work with. */
/* Let's spice up this screen a little bit. */
/* We're getting there! Time to add the frame using box-shadow. */

.macbook {
   background-color: #082746;
   background-image: linear-gradient(20deg, transparent 67%, hsla(0,0%,100%,.05) 67%, hsla(0,0%,100%,.025)),
                      linear-gradient(#ddd 11px, transparent 11px),
                      linear-gradient(#132d4e, #4f7d90);
   border-radius: 8px 8px 0 0;
   box-shadow: inset 0 1px 1px 1px #000,
                inset 0 0 0 9px #111,
                0 0 0 1px #ccc,
                0 0 1px 2px hsla(0,0%,0%,.3),
                0 0 50px hsla(0,0%,0%,.3);
   display: block;
   height: 100px;
   left: 50%;
   margin: -50px -75px;
   position: absolute;
   top: 50%;
   width: 150px;
}

/* Right, that's the screen sorted, now let's add the rest of the body. */

.macbook:after {
   background-color: #ddd;
   background-image: linear-gradient(left, hsla(0,0%,0%,.3), hsla(0,0%,100%,.4) 2%, hsla(0,0%,100%,.1) 5%, hsla(0,0%,0%,.2) 95%, hsla(0,0%,100%,.2) 98%, hsla(0,0%,0%,.4));
   border-bottom: 3px solid hsla(0,0%,40%,.75);
   border-radius: 0 0 4px 4px;
   box-shadow: 0 3px 7px hsla(0,0%,0%,.1);
   content: '';
   height: 7px;
   left: -22px;
   position: absolute;
   right: -22px;
   top: 100%;
}

/* Well would you look at that; our icon is coming along very nicely! Let's finish it off with some small touches that are still missing. greekport.gr */

.macbook:before {
   background-color: #222;
   border-radius: 50%;
   box-shadow: inset 1px 1px 0 hsla(0,0%,100%,.1),
                -13px 96px 0 -1px #888,
                -13px 97px 0 -1px #888,
                -11px 97px 0 #888,
                -9px 97px 0 #888,
                -7px 97px 0 #888,
                -5px 97px 0 #888,
                -3px 97px 0 #888,
                -1px 97px 0 #888,
                1px 97px 0 #888,
                3px 97px 0 #888,
                5px 97px 0 #888,
                7px 97px 0 #888,
                9px 97px 0 #888,
                11px 97px 0 #888,
                13px 97px 0 -1px #888,
                13px 96px 0 -1px #888,
                80px 99px 0 -1px #888,
                81px 99px 0 -1px #888,
                82px 99px 0 -1px #888,
                83px 99px 0 -1px #888,
                84px 99px 0 -1px #888,
                85px 99px 0 -1px #888;
   content: '';
   height: 3px;
   left: 50%;
   margin-left: -2px;
   position: absolute;
   top: 3px;
   width: 3px;
   z-index: 1;
}

/* And there we have it; a single element, pure CSS GREEKPORT.GR MacBook Pro! */
/* Let's finish it off with some background colour styling. */

http://www.greekport.gr

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή  Μήνυμα [Σελίδα 1 από 1]


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

Τρόποι Κοινοποίησης:
URL:
BBCode:
HTML: