CSS Shine logo
How do I make an css shine logo?
CSS3 animation with shine effect over logo.Source: http://manzdev.github.io/text-adventure-engine. What is a css shine logo? How do you make a css shine logo? This script and codes were developed by Manz on 18 January 2023, Wednesday.
CSS Shine logo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Shine logo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="page1"> <div id="logo"> <div class="brillo"></div> <img src="https://manzdev.github.io/text-adventure-engine/logo.png" alt="Innocent Hill Engine"> </div> <div class="title"> <p><strong>Open source</strong>, <strong>multiplayer</strong>, <strong>Text-adventure Engine</strong></p> </div> </div>
</body>
</html>
CSS Shine logo - Script Codes CSS Codes
@import "https://fonts.googleapis.com/css?family=Open+Sans:400|PT+Sans:400,700|Raleway:200|Source+Sans+Pro:100";
/* Carga las fuentes del repositorio de Google Fonts (la regla "import" siempre debe ser la primera línea) */
body { margin:0 } /* Eliminamos los bordes (márgenes) de la página */
/* La capa #page1 contiene la profundidad azul, que la da una imagen */
#page1 { background-image: url(https://manzdev.github.io/text-adventure-engine/enter.png), -webkit-linear-gradient(15deg, #266cad, #004B9E); background-image: url(https://manzdev.github.io/text-adventure-engine/enter.png), linear-gradient(75deg, #266cad, #004B9E); background-repeat: no-repeat, repeat; background-position: top center, 0 0; height:485px; padding:3em; padding-bottom:0;
}
/* Capa #logo donde irá el logotipo y el brillo blanco */
#logo { width:260px; margin:auto; margin-bottom:1em
} /* Estilos del logotipo */ #logo img { width:286px; height:286px; box-shadow:2px 2px 25px #000; border:3px solid #000; position:relative; top:0; left:0; -webkit-transition:all 1s; transition:all 1s; }
/* Estilos de las letras inferiores */ .title { margin:auto; width:600px; } .title p { text-align:center; line-height:110%; font-family: 'PT Sans'; text-shadow:2px 2px 2px #111; letter-spacing:-1px; font-size: 52px; color:#FFF; margin:0; }
/* Efecto y animación del brillo */ .brillo { -webkit-animation: shadow 10s infinite linear; animation: shadow 10s infinite linear; position:absolute; width:286px; height:286px; background: url(https://manzdev.github.io/text-adventure-engine/brillo.png) no-repeat; z-index:2; }
/* Fotogramas del brillo */ @-webkit-keyframes shadow { 0% { opacity:0; background-position:110px 110px } 45% { opacity:0.25; background-position:110px 110px } 50% { opacity:1; background-position:125px 125px } 55% { opacity:0.25; background-position:-425px -425px } 100% { opacity:0; background-position:-425px -425px } } @keyframes shadow { 0% { opacity:0; background-position:110px 110px } 45% { opacity:0.25; background-position:110px 110px } 50% { opacity:1; background-position:125px 125px } 55% { opacity:0.25; background-position:-425px -425px } 100% { opacity:0; background-position:-425px -425px } }
Developer | Manz |
Username | manz |
Uploaded | January 18, 2023 |
Rating | 3 |
Size | 2,411 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS Responsive Hamburger menu | 2,206 Kb |
JS Keyboard Keycodes | 4,747 Kb |
Battery API JS | 2,709 Kb |
Javascript Thug Life | 2,048 Kb |
Space Invaders SVG icon | 1,698 Kb |
Camera Snapshot Emulator | 3,952 Kb |
Earth Animation CSS | 1,852 Kb |
A Pen by Manz | 1,835 Kb |
CSS Instagram | 3,501 Kb |
Monkey Island CSS Animation | 1,916 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Blank Starter | Mhartington | 2,171 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
A Pen by panstable | Panstable | 2,940 Kb |
A Pen by Jess | Jessamyne | 5,100 Kb |
A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
Shopping cart | Andiio | 6,581 Kb |
Replace url via jquery | Serluk | 1,429 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
AOR site logo | Thatbram | 2,527 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!