Aller au contenu
  • Veuillez ne pas poster de message pour but d'insulter, incitation à la haine, propos sexuels et tout autre qui ne respecte pas nos conditions générales !

Perspectives notifications système #CSS

achrafmaziz

Par achrafmaziz
dans Release

 Partager

Messages recommandés

achrafmaziz

achrafmaziz 29

Posté(e)
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:

Pour avoir accès à ce lien, merci de vous connecter.

Démonstration:

Pour avoir accès à ce lien, merci de vous connecter.

 

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.

https://facebook.com/achraf.maziz.3 

Lien à poster
Partager sur d’autres sites
  • 1 an plus tard...
  • Administrateur
Narzo

Narzo 759

Posté(e)
  • Administrateur
Posté(e)
    Salut achrafmaziz ,
    Ton sujet a été déplacé pour une des deux raisons suivantes :

    - Ta demande a été résolue.

    - Ton sujet se trouvait dans la mauvaise catégorie.

        
      Ceci est un message automatique.

《⠀⠀Founder of Inshare.fr⠀》

《⠀⠀Baylife moderator⠀》

《⠀⠀Twitch channel moderator⠀》

《⠀⠀French translator Trucksbook.eu⠀》

𝐹𝑒𝑒𝑙 𝑓𝑟𝑒𝑒 𝑡𝑜 𝑤𝑟𝑖𝑡𝑒 𝑎 𝑐𝑜𝑚𝑚𝑒𝑛𝑡

—————————————————

╱⠀⠀⠀⠀⠀⠀⠀⠀⠀Règlements⠀⠀ //⠀⠀Abonnements⠀⠀ //⠀⠀ Discord   ⠀⠀⠀⠀⠀⠀⠀⠀⠀╲

 

signature.png

Lien à poster
Partager sur d’autres sites
  • 3 ans plus tard...

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...