Aller au contenu

achrafmaziz

Contributeur
 Afficher le profil  Afficher son activité

  • Compteur de contenus

    382

  • Inscription

  • Dernière visite

  • Jours gagnés

    4

 Type de contenu 

Tout ce qui a été posté par achrafmaziz

  1. achrafmaziz
    Salut, Aujourd'hui je vais partager avec vous un style de transition/animation CSS sur des éléments qui sont présentés de manière perspective. Vous pouvez utilisé ces box comme un système de notifications ou autres... Ces propriétés CSS ne sont pas couramment utilisées, du coup, sa risque de ne pas fonctionner sur quelque navigateurs (mix-blend-mode, la nouvelle grille CSS...) Screenshots: https://gyazo.com/b0fd60c1d34f4e3f1c664067e931e5fb Démonstration: http://mapage.my-1.fr/Perspectives/ Code: <!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Notification perspective UI</title> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <style type="text/css"> body { margin: 0; padding: 0; background: #34495e; color: #222f3e; font-family: 'Roboto', Trebuchet MS, sans-serif; font-size: 1em; display: grid; grid-template-columns: auto; grid-template-rows: auto; } ul { list-style-type: none; } .container { display: grid; grid-template-columns: 50% auto; height: auto; align-self: center; margin: 0 50px; } ul { perspective: 1000px; margin-top: 300px; } ul li { display: grid; grid-template-columns: 20% auto; border-radius: 10px; padding: 15px; cursor: pointer; transform: rotateX(15deg) rotateY(-30deg); position: absolute; border-bottom: 4px solid rgba(0,0,0,.2); width: 70%; mix-blend-mode: multiply; } ul li:hover { transform: rotateX(15deg) rotateY(-30deg) scale(1.1); z-index: 3; mix-blend-mode: normal; } ul li:nth-child(1) { background: #bfe8fc; top: -97px; z-index: 2; } ul li:nth-child(2) { background: #faffc8; z-index: 1; } ul li:nth-child(3) { background: rgb(242, 228, 255); top: 97px; } img { width: 70px; } h1 { font-size: 3em; margin-top: 0; } #left > p { line-height: 1.5em; } #left { color: #ecf0f1; } </style> </head> <body> <div class="container"> <div id="left"> </div> <div id="right"> <ul> <li> <img src="dir/static/img/roda-jc-1.svg"> <span> <strong>Title</strong> <p>This is a description</p> </span> </li> <li> <img src="dir/static/img/oregon-ducks-2.svg"> <span> <strong>Title</strong> <p>This is a description</p> </span> </li> <li> <img src="dir/static/img/university-of-wisconsin-milwaukee-11.svg"> <span> <strong>Title</strong> <p>This is a description</p> </span> </li> </ul> </div> </div> </body> </html> Je vous conseil d'utiliser des images SVG pour les îcones Après, c'est à vous d'adapter les choses sur vos sites. Bon usage.
  2. achrafmaziz
    Merci à toi
  3. achrafmaziz
    Merci à toi
  4. achrafmaziz
    Merci à toi
  5. achrafmaziz
    Voilà, il t'a tout dis, supprime tout les éléments dans ta table, si tu n'a rien fais dessus.. TRUNCATE TABLE table_name Remplace table_name par la table que tu veux remettre à zéro
  6. achrafmaziz

    CMS HabboCity

    achrafmaziz a répondu à un(e) sujet de Fords dans CMS & TEMPLATES

    iboom CMS ^^ il a déjà été partager https://inshare.fr/topic/4865-partage-cms-iboom/
  7. achrafmaziz
    Tu as importé une base de donnée déjà utilisée? Tu n'as qu'a supprimé/crée la table... (enfin, c'est ce que je pense)
  8. achrafmaziz
    Merci à toi bon usage
  9. achrafmaziz
    Plutôt j'aurais du utiliser... * { box-sizing: border-box } body { padding: 0; margin: 0 } .truc-a-centrer { position: absolute; /* postulat de départ */ top: 50%; left: 50%; /* à 50%/50% du parent référent */ transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */ }
  10. achrafmaziz
    Salut, Perso je trouve ça moche, le background, le bouton, le titre et la box... Sinon, essaye d'utiliser des couleurs flat, ui, (flatuicolors.com ...) à part ça, merci du partage <3 Et, j'aimerai savoir comment tu as centrer ta box? tu peux me montrer ton code s'il te plaît?
  11. achrafmaziz
    Merci à toi bruh
  12. achrafmaziz
    meeeerci à vous tous,
  13. achrafmaziz
    Mdr, ah oué, je n'y attendais pas, YOU WAS FAST Merci à toi Merci
  14. achrafmaziz
    Salut, Aujourd'hui je partage avec vous une page index, de connexion et d'inscription, Vous pouvez personnalisez après à votre goût. Captures GIF: https://gyazo.com/a64a6ebebba17db08805996332d2722a https://gyazo.com/0b8f12ff0aaa349f6810899159bf1dfb Démonstration: Indisponible Téléchargement: [hide] Lien direct (clique ici) [/hide] Scan: azy, faites moi confiance.. Si vous aimez n'hésitez pas de donner un pouce vert (motivation)... Cordialement, FireWork Poisson
  15. achrafmaziz
    Tu veux faire un recadrage arrondit?
  16. achrafmaziz
    Oui merci
  17. achrafmaziz
    plutôt la merde, renseigne-toi avant de dire 'la vérité', Les langages utilisées sont: Anglais(Pour les codes Front-End) et Français, après y a la locution latin, un text générer pour remplir un peu le vide
  18. achrafmaziz
    Mdr, qu'est ce que tu dis toi mdrr
  19. achrafmaziz

    Footer ecriture mal mis

    achrafmaziz a répondu à un(e) sujet de As2piik dans Résolu

    Au pire, envoie le code html/css ^^ On règle ça pour toi avec un peu d'explications...
  20. achrafmaziz

    Footer ecriture mal mis

    achrafmaziz a répondu à un(e) sujet de As2piik dans Résolu

    p.footer { font: 1em 'Trebuchet Ms', sans-serif; height: 20em; /* hauteur du parent */ line-height: 20em; /* hauteur de ligne (identique) */ white-space: nowrap; /* interdiction de passer à la ligne */ } <p class="footer">© 2018 | NolexCMS développé par Oxilo</p>
  21. achrafmaziz

    Footer ecriture mal mis

    achrafmaziz a répondu à un(e) sujet de As2piik dans Résolu

    Je n'ai pas compris ce que tu veux dire, tu veux changer la police du texte?
  22. achrafmaziz
    Bon, je ne suis pas fan de ce genre de style Sinon, le menu je ne sais pas pourquoi tu l'as mis en Anglais ^^ Sinon, au lieu d'écrire tes textes toutes majuscules (Pour le navbar et les titres de la box), ajoute un text-transform:uppercase ^^ c'est mieux
  23. achrafmaziz
    Oui, je voulais préparer un CMS différent un peu, mais bon je n'ai pas eu le temps. je vais commencer un autre, sinon, le scan est mis à jour
  24. achrafmaziz
    J'aime bien, simple, propre.
  25. achrafmaziz
    Salut, Aujourd'hui je partage avec vous le début d'un CMS que je développais ces derniers jours, c'est plutôt une template et c'est à vous de continuer les autres page. Tout le code est fais par moi, le dessin est responsive, en cas ou d'utilisation, En cas d'utilisation, merci de laisser le copyright. Langages utilisés: Les langages Front-End (HTML,CSS,JS), c'est à vous d'ajouter votre code PHP et compléter les autres pages. Téléchargement: http://www.mediafire.com/file/rd5m4d71aadps19/sauvegarde_15062018.zip/file Scan: https://www.virustotal.com/fr/url/377d09546c6086e7d0a6cd5c06f9459e1e5062ffd1a91a91a72172905edc24ef/analysis/1529100860/ Démonstration: Indisponible Cordialement, FireWork Poisson
×
×
  • Créer...