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 

Messages posté(e)s par achrafmaziz

    Perspectives notifications système #CSS

    dans Release

    Posté(e)

    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.

    Debuter l'id des users à 0

    dans Archivés

    Posté(e)

    il y a 5 minutes, Akushi a dit :

    Si ta encore rien fais dessus suffis de TRUNCATE est sa reset tout x)

    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 :)

     

     

    Register Présentation

    dans Vos créations

    Posté(e)

    il y a 1 minute, Oxilo a dit :

    merci, es je les centre avec margin-top et margin-left

     

    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 */
}

     

    Register Présentation

    dans Vos créations

    Posté(e)

    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?

    Partage template Index/register

    dans Addons

    Posté(e)

    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)... :D
    Cordialement, FireWork Poisson

    • J'aime 2
    • J'adore 1
    • Merci 1

    Partage template Habbo!

    dans CMS & TEMPLATES

    Posté(e)

    Il y a 3 heures, Hudson Hornet a dit :

    La vérité :hey:

    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 -_-

    Footer ecriture mal mis

    dans Résolu

    Posté(e)

    il y a 4 minutes, Oxilo a dit :

    Je veut l'écriture centré mais elle veut pas ce centre pourtant j'ai bien mis text-align: center; dans le css

      

    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>

     

    Avis - Template basique

    dans Vos créations

    Posté(e)

    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

    il y a 23 minutes, PaaxTiz a dit :

    @achrafmaziz Merci, des idées pour l'améliorer ?

     

    Partage template Habbo!

    dans CMS & TEMPLATES

    Posté(e)

    il y a 12 minutes, Pancani a dit :

    Salut, c'est assez différent de ce qu'on voit d'habitude, j'aime bien c'est propre ;)

    Pense à mettre un scan dès que possible! Merci à toi du partage

    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

    Partage template Habbo!

    dans CMS & TEMPLATES

    Posté(e)

    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

     

    image.thumb.png.b606fbeb0307ba9bcc1f80e5222d6e08.png

     

     

    Cordialement,

    FireWork Poisson

     

×
×
  • Créer...