HTML5 banner készítés

Szerző:   |   2017-04-13

HTML5 banner, CSS3, transition, animáció, keyframes, meg minden, amit akartok.

A működő kódot ide kattintva tudod megnézni.

Videó

Videó

HTML forráskód


<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="ad.size" content="width=160,height=600">
	<title>Banner</title>
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin-ext" rel="stylesheet">
	<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

	<div class="banner">
		<div class="logo"><img src="logo.svg" alt="logo"></div>
		<div class="product-name">karóra</div>
		<div class="image"><img src="product.png" alt="product"></div>
		<div class="price">13 900 <span>Ft</span></div>
		<a class="cta" href="http://cyrex.hu">érdekel »</a>
	</div>


</body>
</html>

CSS forráskód


.banner {
	width: 160px;
	height: 600px;
	overflow: hidden;
	margin: 20px auto;
	background: url('bg.png');
	text-align: center;
	position: relative;
	font-family: 'Roboto', sans-serif
}
.banner .logo {
	width: 120px;
	margin: 30px auto 10px auto;
	animation: zoom 1s 1s linear;
	opacity: 0;
	animation-fill-mode: forwards
}
.banner .product-name {
	font-size: 15px;
	font-weight: 700;
	color: #000;
	text-transform: uppercase;
	opacity: 0;
	animation: zoom 1s 1s linear;
	animation-fill-mode: forwards
}
.banner .image {
	position: absolute;
	left: -5px;
	top: 150px;
	animation: zoom 1s linear;
	animation-fill-mode: forwards;
	opacity: 0
}
.banner .price {
	position: absolute;
	top: 480px;
	left: 20px;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -1px;
	background: #d81212;
	color: #fff;
	padding: 6px 10px;
	border-radius: 5px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
	opacity: 0;
	animation: price 1s 3s linear;
	animation-fill-mode: forwards
}
.banner .price span {
	font-size: 15px;
	letter-spacing: 0px
}
.banner .cta {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(#088bd5,#0379bc);
	color: #fff;
	text-decoration: none;
	padding: 10px 0;
	display: block;
	text-transform: uppercase;
	text-shadow: 0 0 5px rgba(0,0,0,0.2);
	opacity: 0;
	animation:	cta 0.7s 4s linear, cta-pulse 3s 6s linear infinite;
	animation-fill-mode: forwards
}
.banner .cta:hover {
	background: linear-gradient(#0379bc,#088bd5);
}


@keyframes zoom {
	0%   { transform: scale(0,0) }
	100% { transform: scale(1,1); opacity: 1 }
}
@keyframes price {
	0%   { transform: scale(0,0); transform: rotate(180deg) }
	50%  { opacity: 1; transform: scale(3,3)  }
	100% { opacity: 1; transform: scale(1,1) }
}
@keyframes cta {
	0%   { height: 0 }
	50%  { height: 70px; opacity: 1 }
	100% { height: 24px; opacity: 1 }
}
@keyframes cta-pulse {
	0%   { height: 24px }
	10%  { height: 45px }
	20%  { height: 24px }
	100% { height: 24px }
}

5 hozzászólás

  1. 2017. augusztus 20. vasárnap - 16:42

    Kedves Tamás!

    A videó témájától kicsit eltérő kérdésem lenne. Egy reszponzív weboldal-t készítek. Van 2 darab div amit balra-jobbra floatolnak. A kérdésem az lenne, hogy a kettő közötti mérettől független margin-t ha az alábbi formában adom meg (calc(40% – 5px); – calc(60% – 5px);) az menyire tarton jó megoldásnak? Persze a célnak megfelel mert működik, de érdekelne, hogy te milyen megoldást eszközölnél a fenti problémára?

    Előre is nagyon szépen köszönöm a válaszodat. 🙂

    , T. Dávid

  2. 2017. július 26. szerda - 11:21

    Kedves Tamás!
    Említetted a videóban, hogy a munkahelyeden Mac-et használsz otthon meg PC-ét. Én hasonló cipőben járok (csak fordítva), és azt szeretném kérdezni, hogy Mac-en milyen kódert használsz a kódíráshoz? Köszönettel
    Balázs

    • 2017. július 26. szerda - 11:42

      TextWrangler-el kínlódok többnyire. Sajnos itt nincs lehetőség szoftverek vásárlására, ezért nem nagyon tudok válogatni az eszközökben. Dreamweaver-em van még, de folyamatosan összeomlik, úgyhogy felejtős. Ha nagyon sokat kell kódólni, akkor inkább a PC-t kapcsolom be.

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Dia szkennelés házilag

    Örülök, hogy segített az írás....

  • Dia szkennelés házilag

    Nagyon szépen köszönöm, hogy leírta próbálkozásait, mert engem is gondolkodásra késztetett. Több száz diaképem van, de én sem akartam kisebb vagyont k...

  • Adobe XD VS. Lunacy

    Ez egy lebutított vektorgrafikus rajzolóprogram, semmi több. Ha az alkalmazásod / weboldalad tartalmaz raszteres elemeket, azokat PS-ben kell külön le...

  • Adobe XD VS. Lunacy

    Szerintem (ez csak az én meglátásom) az XD inkább csak mobil alkalmazás fejlesztésére van. Nem igazán látom azokat a funkciókat benne amiket PS-ben. N...

  • Adobe XD VS. Lunacy

    A Photoshop sosem volt igazán weboldal tervező program. A Fireworks közelebb volt hozzá annak idején, de azt megszüntették. Más kérdés, hogy még mindi...

  • Adobe XD VS. Lunacy

    Meg a PS amúgy sem ingyenes, szóval az Xd egy jó alternatíva az ilyen esetekre....

  • Adobe XD VS. Lunacy

    Dehogynem. Csak most ez a divat, hogy kattintható prototípusokat hozzunk létre....

  • Adobe XD VS. Lunacy

    PS nem megfelelő?...

  • Adobe XD VS. Lunacy

    Az Xd vel fogom csinálni a weboldalak layoutját ezentúl....

  • Adobe XD VS. Lunacy

    A Lunacy-ban az "images, comments, messages" részt nem sikerűlt egyenlő távolságra alakítani :) Maradjunk az XD-nél :)...

  • Bootstrap carousel

    https://stackoverflow.com/questions/4753695/disabling-right-click-on-images-using-jquery...

  • Bootstrap carousel

    Hali. Nekem annyi kérdésem lenne, hogy hogyan lehet azt megcsinálni, mint néhány oldalnál van, hogy van egy kép például, és nem lehet jobbclickelni rá...