Dessiner un ordinateur portable en CSS

Apprendre à gérer et créer un site internet, choix du CMS, des Plugins, Templates Responsive, Refonte... Réalisez votre site vitrine ou boutique E-commerce, solutions de paiement en ligne, conseils, techniques et astuces de Webmasters. Créer un site Web devient plus simple ici !

Créer une réponse à ce sujet

Vous ne pouvez pas poster de nouveaux sujets
Vous ne pouvez pas répondre aux sujets
Vous ne pouvez pas éditer vos messages
Vous ne pouvez pas supprimer vos messages
Vous ne pouvez pas joindre des fichiers

partagepartagepartage
Il y a 4 messages dans cette section.
Page 1 sur 1
Créer un nouveau Sujet sur le Forum

Dessiner un ordinateur portable en CSS

Message :N°1  Message

par
» Sam 11 Mar 2017 03:22

Html :

Code: Tout sélectionner
<div class="laptop">
  <div class="upper"></div>
  <div class="lower"></div>
</div>


CSS :

Code: Tout sélectionner
html
  font-size: .75vw

body
  margin: 0
  background: #89d0d7
  display: flex
  height: 100vh
  width: 100%
  justify-content: center
  align-items: center

.laptop
  width: 50rem
  position: relative
  &:before
    background: #222
    display: block
    content: ''
    position: absolute
    width: .8rem
    height: .8rem
    border-radius: 50%
    top: .7rem
    left: 24.5rem
    z-index: 1000
  &:after
    display: block
    content: ''
    position: absolute
    width: 95%
    margin-left: 2.5%
    height: .75rem
    box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, 0.1)
    border-radius: 5rem
 
.upper
  width: 40rem
  height: 23rem
  background: #3d4144
  border: 2px solid #eaeaea
  border-bottom: none
  border-radius: 1.5rem 1.5rem 0 0
  margin-left: 5rem
  box-shadow: inset 0 0 2px 2px #222
  position: relative
  &:before
    width: 36rem
    height: 19rem
    background: #a1a1a1
    display: block
    content: ''
    top: 2rem
    left: 2rem
    position: absolute
  &:after
    display: block
    content: ''
    position: absolute
    border-bottom: 23rem solid rgba(0,0,0,0.075)
    border-right: 10rem solid transparent
    height: 0
    width: 50%
    border-top-left-radius: 1.5rem


.lower
  width: 50rem
  height: 2rem
  background: #eaeaea
  border-radius: 2px
  position: relative
  &:before
    display: block
    content: ''
    position: absolute
    width: 10rem
    height: .8rem
    background: #a1a1a1
    left: 20rem
    top: 0
    border-radius: 0 0 .25rem .25rem
  &:after
    display: block
    content: ''
    position: absolute
    width: 100%
    height: .75rem
    background: #bababa
    top: 2rem
    border-bottom-right-radius: 7.5rem 2.5rem
    border-bottom-left-radius: 7.5rem 2.5rem


Résultat : Vous devez être inscrit et présenté pour voir les liens ainsi que d'autres éléments qui peuvent être caché aux invités.
  • 0

Avatar de l’utilisateur
GHS Team
 
Messages: 164
Inscription: Jeu 10 Juil 2014 11:25
Réputation: 53
Récompenses: 4
Membre Contributeur (1) Protecteur de GHS Tools (1) Rédaction & Correction FR (1) Traducteur (Français /Anglais) (1)

Re: Dessiner un ordinateur portable en CSS

Message :N°2  Message

par
» Sam 11 Mar 2017 22:52

super, cool ça montre bien les possibiltés du langage css :)
  • 0

Avatar de l’utilisateur
GHS Team
 
Messages: 601
Inscription: Mar 19 Mai 2015 08:30
Localisation: Seine et Marne
Réputation: 281
Récompenses: 6
Membre Contributeur (1) Protecteur de GHS Tools (1) + 100 Posts sur le Forum (1) + 200 Posts sur le Forum (1) Développeur WEB (1) Webmastering (1)

Re: Dessiner un ordinateur portable en CSS

Message :N°3  Message

par
» Mar 18 Juil 2017 16:02

ah formidable ! c'est puissant
  • 0

Avatar de l’utilisateur
R&D Team
 
Messages: 294
Inscription: Ven 14 Juil 2017 06:43
Localisation: paris
Réputation: 77
Récompenses: 3
Membre Contributeur (1) Membre Financeur (1) + 100 Posts sur le Forum (1)

Re: Dessiner un ordinateur portable en CSS

Message :N°4  Message

par
» Mar 18 Juil 2017 20:30

Oui mais, qu'est ce que le processeur Sass ?
Vous devez être inscrit et présenté pour voir les liens ainsi que d'autres éléments qui peuvent être caché aux invités.

Sans le processeur Sass, le code partagé précédemment ne fonctionne pas.
Merci codepen.io ;)
  • 0

Avatar de l’utilisateur
Contributeur
 
Messages: 446
Inscription: Ven 28 Oct 2016 22:09
Localisation: France
Réputation: 265
Récompenses: 4
Membre Contributeur (1) Protecteur de GHS Tools (1) + 100 Posts sur le Forum (1) + 200 Posts sur le Forum (1)


Répondre à ce sujet du Forum

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 222 invités

Retourner vers Création de site Web & Webmastering



 


  • Sujets similaires
    Réponses
    Vus