Codecast: Single Element, Pure CSS MacBook Pro
Σελίδα 1 από 1 • Μοιραστείτε
- Port Admin
Admin - Αριθμός μηνυμάτων : 2651
Πόντοι : 6380
Ημερομηνία εγγραφής : 06/03/2017 -
Port Admin Τετ Αυγ 30, 2017 12:41 am
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. */
Παρόμοια θέματα
Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε
Προκειμένου να απαντήσετε πρέπει να είστε μέλος.
Δημιουργία Λογαριασμού
Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!
Δημιουργία ενός νέου Λογαριασμού
Σελίδα 1 από 1
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης
