Bộ sưu tập được tổng hợp từ các ví dụ về mã huy hiệu HTML và CSS miễn phí từ codepen và các tài nguyên khác trên internet, hữu ích cho các bạn khi thiết kế website cần nhanh các mã hoặc ý tưởng về huy hiệu, phù hiệu cho sản phẩm, dịch vụ ...
NHÃN TƯ VẤN CỦA CHA MẸ
HTML
<main class="label">
<section class="label-top">
<div class="label-top-text">PARENTAL</div>
</section>
<section class="label-middle">
<div class="label-middle-text">ADVISORY</div>
</section>
<section class="label-bottom">
<div class="label-bottom-text">EXPLICIT CONTENT</div>
</section>
</main>CSS
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');
:root {
--scale: 10px;
--width: calc(37 * var(--scale));
--height: calc(25 * var(--scale));
--middle-height: calc(0.41 * var(--height));
--sides-height: calc(0.295 * var(--height));
}
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
width: 100vw;
height: 100vh;
background: #000;
overflow: hidden;
}
.label {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
width: var(--width);
height: var(--height);
box-shadow: 0px 0px 0px 3px #fff, 0px 0px 0px 10px #000, 0px 0px 0px 12px #444;
user-select: none;
bakcground: #fff;
}
.label-top {
width: 100%;
height: var(--sides-height);
padding-left: 18px;
line-height: var(--sides-height);
background: #000;
text-align: center;
}
.label-top-text {
color: #fff;
font-size: calc(0.20 * var(--height));
letter-spacing: 20px;
font-weight: 700;
font-family: 'Open Sans Condensed', sans-serif;
white-space: nowrap;
}
.label-middle {
width: 100%;
height: var(--middle-height);
padding-top: 2px;
padding-left: 2px;
line-height: var(--middle-height);
background: #fff;
text-align: center;
}
.label-middle-text {
color: #000;
font-size: 80px;
letter-spacing: 2px;
font-weight: 700;
font-family: 'Roboto Condensed', sans-serif;
transform: scaleY(1.4);
white-space: nowrap;
}
.label-bottom {
position: relative;
width: 100%;
height: var(--sides-height);
line-height: var(--sides-height);
background: #000;
text-align: center;
}
.label-bottom-text {
position: absolute;
left: -33px;
top: -1px;
color: #fff;
font-weight: 700;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 40px;
letter-spacing: 10px;
white-space: nowrap;
transform: scaleX(0.8) scaleY(1.4);
}
.s1mpson {
--background-color: #fff;
--icon-color: #111;
}HUY HIỆU HOẠT ẢNH
HTML
<div class="badges">
<div class="animated_badge animated_badge_1 hide">
<div class="animated_stars">
<div class="animated_star plus"></div>
<div class="animated_star donut yellow"></div>
<div class="animated_star plus"></div>
<div class="animated_star donut"></div>
<div class="animated_star plus yellow"></div>
</div>
<svg class="animated_badge_svg" width="75" height="100" viewBox="0 0 75 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="badge_ribbon left"
d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
fill="#A5ACB9" />
<path class="badge_ribbon left"
d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
fill="#A5ACB9" />
<path class="badge_ribbon left"
d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
fill="url(#paint0_linear)" />
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="16" y="57" width="44" height="43">
<path
d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
fill="#999999" />
<path
d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
fill="url(#paint1_linear)" />
</mask>
<g class="badge_ribbon left" mask="url(#mask0)">
<rect x="30" y="60" width="15" height="40" fill="#EAEDF2" />
</g>
<circle class="badge_circle" cx="37.5" cy="37.5" r="33.5" fill="#C0C6CF" stroke="#777E8B" stroke-width="8" />
<path class="badge_number" d="M36.272 45H38.772V30.7H36.572C36.332 32.28 35.292 32.82 32.832 32.88V34.78H36.272V45Z" fill="white" />
<defs>
<linearGradient id="paint0_linear" x1="38" y1="57" x2="38" y2="89.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#616468" />
<stop offset="1" stop-color="#A5ACB9" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear" x1="38" y1="57" x2="38" y2="89.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#27539F" />
<stop offset="1" stop-color="#71A1F4" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<div class="animated_badge animated_badge_2 hide">
<div class="animated_stars">
<div class="animated_star plus"></div>
<div class="animated_star donut yellow"></div>
<div class="animated_star plus"></div>
<div class="animated_star donut"></div>
<div class="animated_star plus yellow"></div>
</div>
<svg class="animated_badge_svg" width="75" height="100" viewBox="0 0 75 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="badge_ribbon"
d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
fill="#71A1F4" />
<path class="badge_ribbon"
d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
fill="#71A1F4" />
<path class="badge_ribbon"
d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
fill="url(#paint0_linear)" />
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="16" y="57" width="44" height="43">
<path
d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
fill="#71A1F4" />
<path
d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
fill="url(#paint1_linear)" />
</mask>
<g class="badge_ribbon" mask="url(#mask0)">
<rect x="30" y="60" width="15" height="40" fill="#ABC7F9" />
</g>
<circle class="badge_circle" cx="37.5" cy="37.5" r="33.5" fill="#71A1F4" stroke="#CEDCF5" stroke-width="8" />
<path class="badge_number"
d="M41.1783 45V42.86H35.0183C37.2183 40.82 41.1783 38.44 41.1783 34.8C41.1783 32.3 39.3983 30.42 36.4383 30.42C33.3583 30.42 31.6983 32.54 31.6983 35.14C31.6983 35.18 31.7183 35.22 31.7183 35.28H34.0983C34.1183 33.76 34.8383 32.62 36.4383 32.62C37.8183 32.62 38.6383 33.52 38.6383 34.86C38.6383 36.22 37.8583 37.38 36.0583 39.04C34.3783 40.62 31.8183 42.92 31.8183 42.92V45H41.1783Z"
fill="white" />
<defs>
<linearGradient id="paint0_linear" x1="38" y1="57" x2="38" y2="89.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#27539F" />
<stop offset="1" stop-color="#71A1F4" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear" x1="38" y1="57" x2="38" y2="89.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#27539F" />
<stop offset="1" stop-color="#71A1F4" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<div class="animated_badge animated_badge_3 hide">
<div class="animated_stars">
<div class="animated_star plus"></div>
<div class="animated_star donut yellow"></div>
<div class="animated_star plus"></div>
<div class="animated_star donut"></div>
<div class="animated_star plus yellow"></div>
</div>
<svg class="animated_badge_svg" width="75" height="100" viewBox="0 0 75 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="badge_ribbon"
d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
fill="#71A1F4" />
<path class="badge_ribbon"
d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
fill="#71A1F4" />
<path class="badge_ribbon"
d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
fill="url(#paint0_linear)" />
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="16" y="57" width="44" height="43">
<path
d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
fill="#71A1F4" />
<path
d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
fill="url(#paint1_linear)" />
</mask>
<g class="badge_ribbon" mask="url(#mask0)">
<rect x="23" y="60" width="8" height="40" fill="#ABC7F9" />
<rect x="43" y="60" width="8" height="40" fill="#ABC7F9" />
</g>
<circle cx="37.5" cy="37.5" r="33.5" fill="#C0C6CF" stroke="#C0C6CF" stroke-width="8" />
<circle class="badge_circle" cx="37.5" cy="37.5" r="29.5" fill="#C0C6CF" stroke="#EAEDF2" stroke-width="4" />
<path class="badge_number"
d="M32.72 40.88C32.9 43.36 34.62 45.26 37.64 45.26C40.72 45.26 42.66 43.42 42.66 40.78C42.66 39.02 41.72 37.68 40.02 37.12C41.16 36.52 41.94 35.5 41.94 34.16C41.94 31.94 40.28 30.42 37.7 30.42C35.12 30.42 33.48 32.04 33.42 34.26H35.72C35.84 33.14 36.6 32.5 37.64 32.5C38.64 32.5 39.46 33.06 39.48 34.24C39.48 35.76 38.24 36.24 36.66 36.24V38.24H37.22C38.86 38.24 40.14 38.96 40.14 40.7C40.14 42.06 39.2 43.16 37.7 43.16C36.14 43.16 35.32 42.24 35.16 40.88H32.72Z"
fill="white" />
<defs>
<linearGradient id="paint0_linear" x1="38" y1="57" x2="38" y2="89.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#27539F" />
<stop offset="1" stop-color="#71A1F4" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear" x1="38" y1="57" x2="38" y2="89.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#27539F" />
<stop offset="1" stop-color="#71A1F4" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<div class="animated_badge animated_badge_4 hide">
<div class="animated_stars">
<div class="animated_star plus"></div>
<div class="animated_star donut yellow"></div>
<div class="animated_star plus"></div>
<div class="animated_star donut"></div>
<div class="animated_star plus yellow"></div>
</div>
<svg class="animated_badge_svg" width="75" height="98" viewBox="0 0 75 98" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="badge_ribbon right"
d="M18 96.2589L18 60C18 59.4477 18.4477 59 19 59H57.3843C57.9366 59 58.3843 59.4477 58.3843 60V96.2334C58.3843 96.9469 57.6586 97.4308 56.9999 97.1566L39.0269 89.6734C38.7859 89.573 38.5153 89.5709 38.2728 89.6674L19.3697 97.188C18.7131 97.4493 18 96.9656 18 96.2589Z"
fill="#FCC838" />
<path class="badge_ribbon right"
d="M18 96.2589L18 60C18 59.4477 18.4477 59 19 59H57.3843C57.9366 59 58.3843 59.4477 58.3843 60V96.2334C58.3843 96.9469 57.6586 97.4308 56.9999 97.1566L39.0269 89.6734C38.7859 89.573 38.5153 89.5709 38.2728 89.6674L19.3697 97.188C18.7131 97.4493 18 96.9656 18 96.2589Z"
fill="url(#paint0_linear)" />
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="17" y="58" width="42" height="38">
<path
d="M18 90.3625V64C18 61.2386 20.2386 59 23 59H53.3843C56.1457 59 58.3843 61.2386 58.3843 64V90.2351C58.3843 93.8024 54.7557 96.2222 51.4624 94.851L40.5301 90.2992C39.3254 89.7977 37.9723 89.7869 36.7599 90.2693L24.8484 95.0083C21.5653 96.3145 18 93.8959 18 90.3625Z"
fill="#71A1F4" />
<path
d="M18 90.3625V64C18 61.2386 20.2386 59 23 59H53.3843C56.1457 59 58.3843 61.2386 58.3843 64V90.2351C58.3843 93.8024 54.7557 96.2222 51.4624 94.851L40.5301 90.2992C39.3254 89.7977 37.9723 89.7869 36.7599 90.2693L24.8484 95.0083C21.5653 96.3145 18 93.8959 18 90.3625Z"
fill="url(#paint1_linear)" />
<path
d="M18 90.3625V64C18 61.2386 20.2386 59 23 59H53.3843C56.1457 59 58.3843 61.2386 58.3843 64V90.2351C58.3843 93.8024 54.7557 96.2222 51.4624 94.851L40.5301 90.2992C39.3254 89.7977 37.9723 89.7869 36.7599 90.2693L24.8484 95.0083C21.5653 96.3145 18 93.8959 18 90.3625Z"
stroke="#8C62F5" />
</mask>
<g class="badge_ribbon right" mask="url(#mask0)">
<rect width="12.9378" height="46.9542" transform="matrix(0.99996 -0.008926 0.0199657 0.999801 32.0576 65.3011)"
fill="#FCD977" />
</g>
<circle cx="37.5" cy="37.5" r="33.5" fill="#DBDFE7" stroke="#8C62F5" stroke-width="8" />
<circle class="badge_circle" cx="37.5" cy="37.5" r="29.5" fill="#8C62F5" stroke="#D1C0FB" stroke-width="4" />
<path class="badge_number"
d="M43.16 39.98H41.28V30.7H39.04C39 30.76 37.64 32.78 36.82 33.96L32.54 40.12V42.08H39.02V45H41.28V42.08H43.16V39.98ZM39.06 33.9C39.04 34.58 39.02 35.68 39.02 36.46V39.98H35.02C35.02 39.98 35.84 38.76 36.52 37.78L37.46 36.4C38.1 35.46 38.86 34.16 39.02 33.9H39.06Z"
fill="#E3D9FC" />
<defs>
<linearGradient id="paint0_linear" x1="38.1921" y1="59" x2="38.1921" y2="97.1461"
gradientUnits="userSpaceOnUse">
<stop stop-color="#DFAC28" />
<stop offset="1" stop-color="#FCC838" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear" x1="38.1921" y1="59" x2="38.1921" y2="97.1461"
gradientUnits="userSpaceOnUse">
<stop stop-color="#27539F" />
<stop offset="1" stop-color="#71A1F4" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<div class="animated_badge animated_badge_5 hide">
<div class="animated_stars">
<div class="animated_star plus"></div>
<div class="animated_star donut yellow"></div>
<div class="animated_star plus"></div>
<div class="animated_star donut"></div>
<div class="animated_star plus yellow"></div>
</div>
<svg class="animated_badge_svg" width="84" height="99" viewBox="0 0 84 99" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="badge_ribbon"
d="M0.761166 82.9447L17.3041 50.8886C17.5574 50.3979 18.1606 50.2053 18.6513 50.4586L43.875 63.4756C44.3658 63.7289 44.5583 64.332 44.305 64.8228L27.7788 96.8466C27.4294 97.5236 26.4817 97.5769 26.0586 96.9435L17.8756 84.694C17.6881 84.4133 17.3716 84.2461 17.0341 84.2495L1.65981 84.4033C0.906487 84.4108 0.415676 83.6142 0.761166 82.9447Z"
fill="#F04152" />
<path class="badge_ribbon"
d="M0.761166 82.9447L17.3041 50.8886C17.5574 50.3979 18.1606 50.2053 18.6513 50.4586L43.875 63.4756C44.3658 63.7289 44.5583 64.332 44.305 64.8228L27.7788 96.8466C27.4294 97.5236 26.4817 97.5769 26.0586 96.9435L17.8756 84.694C17.6881 84.4133 17.3716 84.2461 17.0341 84.2495L1.65981 84.4033C0.906487 84.4108 0.415676 83.6142 0.761166 82.9447Z"
fill="url(#paint0_linear)" />
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="1" y="50" width="44" height="46">
<path
d="M3.80623 77.0441L15.4697 54.4432C16.7361 51.9893 19.752 51.0266 22.2059 52.293L40.3204 61.6412C42.7743 62.9076 43.737 65.9235 42.4707 68.3774L30.8904 90.817C29.1437 94.2016 24.4052 94.4685 22.2895 91.3014L19.0777 86.4935C18.1402 85.09 16.5578 84.2543 14.8701 84.2712L8.29946 84.3369C4.53283 84.3745 2.07879 80.3915 3.80623 77.0441Z"
fill="#71A1F4" />
<path
d="M3.80623 77.0441L15.4697 54.4432C16.7361 51.9893 19.752 51.0266 22.2059 52.293L40.3204 61.6412C42.7743 62.9076 43.737 65.9235 42.4707 68.3774L30.8904 90.817C29.1437 94.2016 24.4052 94.4685 22.2895 91.3014L19.0777 86.4935C18.1402 85.09 16.5578 84.2543 14.8701 84.2712L8.29946 84.3369C4.53283 84.3745 2.07879 80.3915 3.80623 77.0441Z"
fill="url(#paint1_linear)" />
</mask>
<g class="badge_ribbon" mask="url(#mask0)">
<rect width="9.73445" height="46.9502" transform="matrix(0.894023 0.448022 -0.445194 0.895434 24.272 60.4499)"
fill="#FCD977" />
</g>
<path class="badge_ribbon right"
d="M56.5365 97.1074L38.5 65.8673C38.2239 65.389 38.3877 64.7774 38.866 64.5013L63.4476 50.3091C63.9259 50.0329 64.5375 50.1968 64.8137 50.6751L82.832 81.8838C83.2129 82.5435 82.7458 83.3698 81.9841 83.3836L67.2552 83.6511C66.9177 83.6572 66.6061 83.8332 66.4266 84.1191L58.2494 97.1392C57.8487 97.7772 56.9132 97.7598 56.5365 97.1074Z"
fill="#F04152" />
<path class="badge_ribbon right"
d="M56.5365 97.1074L38.5 65.8673C38.2239 65.389 38.3877 64.7774 38.866 64.5013L63.4476 50.3091C63.9259 50.0329 64.5375 50.1968 64.8137 50.6751L82.832 81.8838C83.2129 82.5435 82.7458 83.3698 81.9841 83.3836L67.2552 83.6511C66.9177 83.6572 66.6061 83.8332 66.4266 84.1191L58.2494 97.1392C57.8487 97.7772 56.9132 97.7598 56.5365 97.1074Z"
fill="url(#paint2_linear)" />
<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="38" y="49" width="45" height="47">
<path
d="M53.2165 91.357L40.5 69.3314C39.1193 66.9399 39.9387 63.882 42.3301 62.5013L59.9835 52.3091C62.375 50.9283 65.4329 51.7477 66.8137 54.1392L79.4394 76.0076C81.3438 79.3061 79.0082 83.4376 75.2001 83.5068L69.419 83.6118C67.7314 83.6424 66.1732 84.5224 65.2756 85.9517L61.7808 91.5162C59.7774 94.7061 55.0999 94.6192 53.2165 91.357Z"
fill="#71A1F4" />
<path
d="M53.2165 91.357L40.5 69.3314C39.1193 66.9399 39.9387 63.882 42.3301 62.5013L59.9835 52.3091C62.375 50.9283 65.4329 51.7477 66.8137 54.1392L79.4394 76.0076C81.3438 79.3061 79.0082 83.4376 75.2001 83.5068L69.419 83.6118C67.7314 83.6424 66.1732 84.5224 65.2756 85.9517L61.7808 91.5162C59.7774 94.7061 55.0999 94.6192 53.2165 91.357Z"
fill="url(#paint3_linear)" />
</mask>
<g class="badge_ribbon right" mask="url(#mask1)">
<rect width="9.73445" height="46.9502" transform="matrix(0.860033 -0.510239 0.512954 0.858416 50.3103 65.1699)"
fill="#FCD977" />
</g>
<circle cx="40.5" cy="37.5" r="33.5" fill="#DBDFE7" stroke="#FCD977" stroke-width="8" />
<circle class="badge_circle" cx="40.5" cy="37.5" r="29.5" fill="#FCD977" stroke="#FFA826" stroke-width="4" />
<path class="badge_number"
d="M35.26 38.42C36.04 38.52 36.74 38.66 37.5 38.78C37.86 38.1 38.56 37.56 39.64 37.56C41.26 37.56 42.22 38.8 42.22 40.34C42.22 42 41.28 43.2 39.62 43.2C38.18 43.2 37.4 42.28 37.18 41.08H34.72C34.98 43.56 36.86 45.3 39.68 45.3C42.68 45.3 44.7 43.14 44.7 40.26C44.7 37.42 42.86 35.46 40.16 35.46C39.16 35.46 38.36 35.76 37.68 36.2L37.84 35.06C37.94 34.34 37.98 33.62 38.1 32.9H43.7V30.7H36.14C35.84 33.32 35.58 35.78 35.26 38.42Z"
fill="#FFA826" />
<defs>
<linearGradient id="paint0_linear" x1="31.2632" y1="56.9671" x2="13.7695" y2="90.8654"
gradientUnits="userSpaceOnUse">
<stop stop-color="#A31523" />
<stop offset="1" stop-color="#F04152" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear" x1="31.2632" y1="56.9671" x2="13.7695" y2="90.8654"
gradientUnits="userSpaceOnUse">
<stop stop-color="#27539F" />
<stop offset="1" stop-color="#71A1F4" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint2_linear" x1="51.1568" y1="57.4052" x2="70.2299" y2="90.4407"
gradientUnits="userSpaceOnUse">
<stop stop-color="#A31523" />
<stop offset="1" stop-color="#F04152" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint3_linear" x1="51.1568" y1="57.4052" x2="70.2299" y2="90.4407"
gradientUnits="userSpaceOnUse">
<stop stop-color="#27539F" />
<stop offset="1" stop-color="#71A1F4" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
</div>CSS
* {
box-sizing: border-box;
}
.hide {
display: none !important;
}
body {
font-family: Helvetica Neue;
}
.intro {
margin-top: 32px;
text-align: center;
}
.badges {
display: flex;
/* flex-direction: column; */
justify-content: flex-start;
flex-wrap: wrap;
align-items: center;
padding: 32px 0;
text-align: center;
width: 100%;
}
.badges .animated_badge_svg {
display: block;
position: relative;
}
.badges .animated_badge {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 156px;
height: 156px;
margin: 24px 64px;
background-color: #fff;
border-radius: 100px;
box-shadow: 0px 2px 4px rgba(25, 35, 49, 0.02), 0px 24px 32px rgba(25, 35, 49, 0.08), 0px 4px 40px rgba(0, 0, 0, 0.12);
animation: fade-in-top 1.5s ease forwards;
will-change: transform, opacity;
opacity: 0;
}
.badges .animated_badge::before {
content: '';
position: absolute;
left: 19px;
top: 19px;
width: 118px;
height: 118px;
background-color: #f1f1eb;
border-radius: 100px;
opacity: 0;
animation: fade-in 1.5s ease forwards;
will-change: transform, opacity;
}
/* .badges .animated_badge_1 {
animation-delay: 0s;
}
.badges .animated_badge_2 {
animation-delay: 2s;
}
.badges .animated_badge_3 {
animation-delay: 4s;
}
.badges .animated_badge_4 {
animation-delay: 6s;
}
.badges .animated_badge_5 {
animation-delay: 8s;
} */
.badges .animated_badge .badge_ribbon {
opacity: 0;
transform: translate(-5px, -10px) rotate(75deg) scale(0.5);
transform-origin: center;
animation: badge-ribbon-left-animation 1s 0.5s ease forwards;
will-change: transform, opacity;
}
.badges .animated_badge .badge_ribbon.right {
opacity: 0;
transform: translate(5px, -10px) rotate(-75deg) scale(0.5);
transform-origin: center;
animation: badge-ribbon-right-animation 1s 0.5s ease forwards;
will-change: transform, opacity;
}
.badges .animated_stars {
position: absolute;
left: 0;
top: 0;
}
.badges .animated_stars .animated_star {
position: absolute;
opacity: 0;
animation: star-animation 0.6s 1s ease forwards;
will-change: transform, opacity;
}
.badges .animated_stars .animated_star:nth-of-type(1) {
left: -6px;
top: 26px;
animation-delay: 1s;
}
.badges .animated_stars .animated_star:nth-of-type(2) {
left: 32px;
top: 14px;
animation-delay: 1.05s;
}
.badges .animated_stars .animated_star:nth-of-type(3) {
left: 75px;
top: -12px;
animation-delay: 1.1s;
}
.badges .animated_stars .animated_star:nth-of-type(4) {
left: 121px;
top: 9px;
animation-delay: 1.15s;
}
.badges .animated_stars .animated_star:nth-of-type(5) {
left: 152px;
top: 35px;
animation-delay: 1.2s;
}
.badges .animated_stars .animated_star.plus {
width: 12px;
height: 12px;
}
.badges .animated_stars .animated_star.plus::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 12px;
height: 4px;
background-color: #d5d4d1;
border-radius: 10px;
}
.badges .animated_stars .animated_star.plus::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 4px;
height: 12px;
background-color: #d5d4d1;
border-radius: 10px;
}
.badges .animated_stars .animated_star.plus.yellow::before, .badges .animated_stars .animated_star.plus.yellow::after {
background-color: #fcd977;
}
.badges .animated_stars .animated_star.donut {
position: relative;
width: 10px;
height: 10px;
border: 3px solid #fcd977;
background-color: transparent;
border-radius: 10px;
}
@keyframes star-animation {
0% {
opacity: 1;
transform: scale(0.2);
}
50% {
opacity: 1;
transform: scale(1.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes badge-circle-animation {
0% {
opacity: 0;
transform: translateY(-6px) scale(0.5);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes badge-ribbon-left-animation {
0% {
opacity: 0;
transform: translate(-5px, -10px) rotate(75deg) scale(0.5);
}
100% {
opacity: 1;
transform: translate(0) rotate(0deg) scale(1);
}
}
@keyframes badge-ribbon-right-animation {
0% {
opacity: 0;
transform: translate(5px, -10px) rotate(-75deg) scale(0.5);
}
100% {
opacity: 1;
transform: translate(0) rotate(0deg) scale(1);
}
}
@keyframes fade-in-top {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}JS
setTimeout(() => {
document.querySelector(".animated_badge_1").classList.remove("hide");
}, 0);
setTimeout(() => {
document.querySelector(".animated_badge_2").classList.remove("hide");
}, 1600);
setTimeout(() => {
document.querySelector(".animated_badge_3").classList.remove("hide");
}, 3200);
setTimeout(() => {
document.querySelector(".animated_badge_4").classList.remove("hide");
}, 4800);
setTimeout(() => {
document.querySelector(".animated_badge_5").classList.remove("hide");
}, 6400);HUY HIỆU NÚT BẤM
Huy hiệu được dùng làm đồ trang trí trong thiết kế trang web. Chúng thường được sử dụng để thể hiện chất lượng / độ tin cậy của sản phẩm hoặc dịch vụ.
HTML
<h1>B is for Badge</h1>
<p>Because They Look Awesome as Buttons...</p>
<h5><b>Badges</b> are used as ornaments in website designing. They are usually used to express the quality/reliability of a product or a service.</h5>
<main class="wrapper">
<article class="badge orange">
<div class="rounded"><i class="fab fa-html5"></i></div>
</article>
<article class="badge blue">
<div class="rounded"><i class="fab fa-css3-alt"></i></div>
</article>
<article class="badge gold">
<div class="rounded"><i class="fab fa-js-square"></i></div>
</article>
<article class="badge red">
<div class="rounded"><i class="fab fa-adobe"></i></div>
</article>
<article class="badge purple">
<div class="rounded"><i class="fab fa-php"></i></div>
</article>
<article class="badge green">
<div class="rounded"><i class="fab fa-node"></i></div>
</article>
<article class="badge crimson">
<div class="rounded"><i class="fab fa-npm"></i></div>
</article>
<article class="badge steel">
<div class="rounded"><i class="fab fa-python"></i></div>
</article>
<article class="badge pink">
<div class="rounded"><i class="fab fa-sass"></i></div>
</article>
<article class="badge rebecca">
<div class="rounded"><i class="fab fa-bootstrap"></i></div>
</article>
<article class="badge gainsboro">
<div class="rounded"><i class="fab fa-java"></i></div>
</article>
</main>CSS
/* Base */
* { box-sizing: border-box; }
body {
background: darkslategrey;
margin: 2rem 0;
}
/* Headers */
h1, h5, p {
text-align: center;
}
h1 {
color: khaki;
margin-top: 1em;
letter-spacing: 1.4px;
line-height: 1.2;
}
h5 {
color: linen;
}
p {
color: darkgrey;
}
/* Wrapper */
.wrapper {
width: 90%;
max-width: 900px;
margin: 3em auto;
text-align: center;
}
/* Badge */
.badge {
margin: 1.5em 3em;
width: 6.4em;
height: 6.4em;
border-radius: 20%;
display: inline-block;
top: 0;
transition: all 0.2s ease;
box-shadow: 8px 10px 12px 3px rgba(0, 0, 0, 0.43);
}
.rounded {
width: 70px;
height: 70px;
background: white;
position: absolute;
margin: 15px 16px auto;
z-index: 10;
border-radius: 30%;
box-shadow: 8px 8px 8px 2px rgba(0, 0, 0, 0.23);
i.fab {
font-size: 2.6em;
margin-top: 16px;
}
}
/* Colors */
.blue {
background: dodgerblue;
color: deepskyblue;
}
.orange {
background: darkorange;
color: orange;
}
.gold {
background: gold;
color: gold;
}
.red {
background: red;
color: red;
}
.purple {
background: mediumpurple;
color: slategray;
}
.green {
background: yellowgreen;
color: darkslategray;
}
.crimson {
background: crimson;
color: firebrick;
}
.steel {
background: steelblue;
color: gold;
}
.pink {
background: hotpink;
color: palevioletred;
}
.rebecca {
background: rebeccapurple;
color: rebeccapurple;
}
.gainsboro {
background: gainsboro;
color: orangered;
}HUY HIỆU CSS ĐỘNG
HTML
<div class="center">
<div class="circle">
<div class="logo">S</div>
<div class="text">
<svg x="0" y="0" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
<path id="circlePath"
d="
M 150, 150
m -120, 0
a 120,120 0 0,1 240,0
a 120,120 0 0,1 -240,0
"
/>
</defs>
<g>
<text>
<textPath xlink:href="#circlePath">
Sign up today! For exciting news & updates</textPath>
</text>
</g>
</svg>
</div>
<div class="button">SIGN UP</div>
</div>
</div>CSS
*, *:before, *:after {
box-sizing: border-box;
}
body {
height: 100vh;
background: #000;
}
.center {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.circle {
position: relative;
width: 200px;
height: 200px;
color: #fff;
background: #000;
border-radius: 50%;
border: 2px solid;
}
.logo {
font-size: 140px;
line-height: 200px;
vertical-align: middle;
}
.button {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
padding: 8px;
font-weight: bold;
text-transform: uppercase;
background: #000;
border: 2px solid;
animation: slide 1.4s ease-in-out infinite;
cursor: pointer;
}
.button:hover {
color: #000;
background: #fff;
border-color: #fff;
}
@keyframes slide {
0% {
transform: translateX(10px)
}
50% {
transform: translateX(-10px)
}
100% {
transform: translateX(10px)
}
}
.text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
animation: rotate 14s linear infinite;
fill: #fff;
}
@keyframes rotate {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}JS
console.clear()
// const node = document.getElementById('id')
// const node = document.getElementsByClassName('class')
// const nodes = document.querySelectorAll('div')
// window.addEventListener()HUY HIỆU CSS
HTML
<div class="badge">
<div class="badge__label">+10</div>
</div>CSS
$base-color: #0071f6;
html,
body {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
}
body {
box-sizing: border-box;
*,
*:before,
*:after {
box-sizing: inherit;
}
}
@keyframes introduceBadge {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes pulseBadge {
0% {
transform: scale(1)
}
50% {
transform: scale(1.05)
}
100% {
transform: scale(1)
}
}
@keyframes pulseBadge2 {
0% {
transform: scale(1)
}
50% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
.badge {
animation: introduceBadge 1s linear 0s 1 both;
background: rgba($base-color, 0.2);
border-radius: 50%;
height: 136px;
perspective: 600px;
position: relative;
width: 136px;
&:before,
&:after {
animation: pulseBadge 3s cubic-bezier(0.860, 0.000, 0.070, 1.000) 0s infinite both;
border: 2px dashed $base-color;
border-radius: inherit;
bottom: -16px;
content: "";
left: -16px;
opacity: 0.2;
position: absolute;
right: -16px;
top: -16px;
}
&:after {
animation-name: pulseBadge2;
bottom: -32px;
left: -32px;
opacity: 0.1;
right: -32px;
top: -32px;
}
}
@keyframes introduceLabel {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.4) rotateY(-1800deg);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotateY(20deg);
}
}
@keyframes rotateLabel {
0% {
transform: translate(-50%, -50%) rotateY(20deg);
}
50% {
transform: translate(-50%, -50%) rotateY(-20deg);
}
100% {
transform: translate(-50%, -50%) rotateY(20deg);
}
}
.badge__label {
animation: introduceLabel 2s cubic-bezier(0.19, 1, 0.22, 1) 1s 1 both,
rotateLabel 5s linear 3s infinite;
color: $base-color;
font: 900 88px/1 -apple-system, BlinkMacSystemFont;
left: 50%;
position: absolute;
text-align: center;
text-shadow: 0px 4px 8px rgba($base-color, 0.2);
top: 50%;
transform: translate(-50%, -50%);
}
HUY HIỆU ĐỘC QUYỀN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Exclusive</title>
</head>
<body>
<div class="Card">
<div class="ribbon"><span class="ribbon__content">exclusive</span></div>
</div>
<div class="test"></div>
</body>
</html>CSS
*,*::after,*::before{
box-sizing: inhiret;
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
}
body {
background-color: #c8d6e5;
}
.Card {
background-color: #d1d8e0;
height: 70vh;
width: 22rem;
margin: 6rem auto;
border-radius: 6px;
position: relative;
box-shadow: 9px 5px 5px rgba(0,0,0,.3);
background-image: url(https://source.unsplash.com/random);
background-position: center;
background-size: cover;
z-index: 1;
}
.ribbon {
width: 150px;
height: 150px;
overflow: hidden;
position: absolute;
top: -10px;
right: -10px;
}
.ribbon__content {
left: -25px;
top: 30px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
display: block;
width: 225px;
padding: 10px 0;
background-color: #f5cd79;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.192);
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-transform: uppercase;
text-align: center;
border: 2px dotted #fff;
outline : 5px solid #f5cd79;
}
.ribbon::before {
top: 0;
left: 0;
border-top-color: transparent;
border-right-color: transparent;
position: absolute;
z-index: -1;
content: '';
display: block;
border: 5px solid #f19066;
box-sizing: content-box;
}
.ribbon::after {
bottom: 0;
right: 0;
border-top-color: transparent;
border-right-color: transparent;
position: absolute;
z-index: -1;
content: '';
display: block;
border: 5px solid #f19066;
}
HUY HIỆU SVG BLACK FRIDAY THÍCH ỨNG
Huy hiệu có văn bản trên đường dẫn sử dụng SVG.
HTML
<a href="#" class="badge">
<svg viewBox="0 0 210 210">
<g stroke="none" fill="none">
<path d="M22,104.5 C22,58.9365081 58.9365081,22 104.5,22 C150.063492,22 187,58.9365081 187,104.5" id="top"></path>
<path d="M22,104.5 C22,150.063492 58.9365081,187 104.5,187 C150.063492,187 187,150.063492 187,104.5" id="bottom"></path>
</g>
<circle cx="105" cy="105" r="62" stroke="currentColor" stroke-width="1" fill="none" />
<text width="200" font-size="20" fill="currentColor">
<textPath startOffset="50%" text-anchor="middle" alignment-baseline="middle" xlink:href="#top">
Special offers
</textPath>
</text>
<text width="200" font-size="20" fill="currentColor">
<textPath startOffset="50%" text-anchor="middle" alignment-baseline="middle" xlink:href="#bottom">
only today
</textPath>
</text>
</svg>
<span>Black Friday</span>
</a>CSS
body {
font-family: "Allerta Stencil", sans-serif;
padding: 0;
margin: 70px 10px;
background: #efefef;
display: flex;
justify-content: center;
align-items: center;
min-height: calc(99vh - 140px);
}
.badge {
position: relative;
letter-spacing: 0.08em;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: transform 0.3s ease;
transform: rotate(-14deg);
text-align: center;
filter: drop-shadow(0.25em 0.7em 0.95em rgba(0, 0, 0, 0.8));
/* min-size + (max-size - min-size) * ( (100vw - min-width) / ( max-width - min-width) ) */
font-size: calc(11px + 14 * ( (100vw - 420px) / ( 860) ));
}
@media screen and (max-width: 420px) {
.badge {
font-size: 11px;
}
}
@media screen and (min-width: 1280px) {
.badge {
font-size: 25px;
}
}
.badge::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 10em;
height: 10em;
border-radius: 100%;
background: #111;
opacity: 0.8;
transition: opacity 0.3s linear;
}
.badge:hover {
color: #fff;
text-decoration: none;
transform: rotate(-10deg) scale(1.05);
}
.badge:hover::before {
opacity: 0.9;
}
.badge svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
z-index: 0;
width: 10em;
height: 10em;
}
.badge span {
display: block;
background: #111;
border-radius: 0.4em;
padding: 0.4em 1em;
z-index: 1;
min-width: 11em;
border: 1px solid;
text-transform: uppercase;
}HUY HIỆU BOULDER
Hình minh họa CSS thuần túy dựa trên thiết kế của Patrick Moriarty.
HTML
<!-- Based on design by Patrick Moriarty https://dribbble.com/shots/4059798-Boulder-Badge-->
<div class="patch-container">
<div class="patch-top">
<div class="patch-top-rounding"></div>
</div>
<div class="patch-base">
<div class="mountains">
<div class="mountain__left"></div>
<div class="mountain__right"></div>
<div class="mountain__middle"></div>
<div class="tent">
<div class="tent__flag"></div>
</div>
<div class="tree__left"></div>
<div class="tree__right"></div>
</div>
</div>
<div class="ribbon"><span>WONDER & WANDER</span></div>
<div class="sun">
<div class="ray ray1"></div>
<div class="ray ray2"></div>
<div class="ray ray3"></div>
<div class="ray ray4"></div>
<div class="ray ray5"></div>
<div class="ray ray6"></div>
<div class="ray ray7"></div>
<div class="ray ray8"></div>
</div>
<div class="curved-text"><span>B</span><span>O</span><span>U</span><span>L</span><span>D</span><span>E</span><span>R</span><span>,</span><span>C</span><span>O</span><span>L</span><span>O</span><span>R</span><span>A</span><span>D</span><span>O</span>
</div>
<div class="moon"></div>
<div class="cloud__small left"></div>
<div class="cloud__small right"></div>
<div class="cloud__big left"></div>
<div class="cloud__big right"></div>
<div class="stars">
<div class="star star1">
<div class="cover left"></div>
<div class="cover right"></div>
</div>
<div class="star star2">
<div class="cover left"></div>
<div class="cover right"></div>
</div>
<div class="star star3">
<div class="cover left"></div>
<div class="cover right"></div>
</div>
<div class="star star4">
<div class="cover left"></div>
<div class="cover right"></div>
</div>
<div class="star star5">
<div class="cover left"></div>
<div class="cover right"></div>
</div>
<div class="star star6">
<div class="cover left"></div>
<div class="cover right"></div>
</div>
<div class="star star7">
<div class="cover left"></div>
<div class="cover right"></div>
</div>
<div class="star star8">
<div class="cover left"></div>
<div class="cover right"></div>
</div>
</div>
</div>
<div class="link-container"><span>Original artwork by </span><a href="https://dribbble.com/shots/4059798-Boulder-Badge" target="_blank">Patrick Moriarty</a></div>CSS
.pseudo, .tree__left:before, .tree__left:after, .tree__right:before, .tree__right:after, .tent:before, .tent:after, .mountains .mountain__middle:before, .mountains .mountain__right:before, .mountains .mountain__left:before, .moon:before, .sun:after, .ribbon:before, .ribbon:after, .cloud-big:after, .cloud__big:after, .cloud-small:before, .cloud__small:before, .cloud-big:before, .cloud__big:before, .star:before, .star:after {
content: "";
position: absolute;
}
.star {
height: 2.5em;
width: 2.5em;
background: #faf7e8;
position: absolute;
}
.star:before, .star:after, .star .cover {
height: 2.5em;
width: 2.5em;
border-radius: 100%;
background: #395a6d;
position: absolute;
}
.star:before {
top: -1.25em;
left: -1.25em;
}
.star:after {
top: -1.25em;
right: -1.25em;
}
.star .cover.left {
left: -1.25em;
bottom: -1.25em;
}
.star .cover.right {
bottom: -1.25em;
right: -1.25em;
}
.cloud-small, .cloud__small, .cloud-big, .cloud__big {
width: 4em;
height: 2em;
border-radius: 4em 4em 0 0;
position: absolute;
background: #86beb3;
}
.cloud-small:before, .cloud__small:before, .cloud-big:before, .cloud__big:before {
background: #86beb3;
height: 1em;
width: 2em;
border-radius: 2em 2em 0 0;
left: -1.2em;
bottom: 0;
}
.cloud-big:after, .cloud__big:after {
width: 4.2em;
height: 2.1em;
border-radius: 4.2em 4.2em 0 0;
background: #86beb3;
position: absolute;
right: -3.1em;
bottom: 0;
}
body {
font-size: 10px;
min-height: 97vh;
display: flex;
justify-content: center;
align-items: center;
background: #DCC48E;
}
.patch-container {
position: relative;
z-index: -2;
height: 50em;
width: 46em;
top: -1em;
}
.patch-base {
height: 45.5em;
width: 40em;
background: linear-gradient(180deg, #395a6d 55%, #86beb3 55%);
position: absolute;
transform: translateX(-50%);
left: 50%;
bottom: 0;
border-radius: 0 0 20em 20em;
border: 1.3em solid #faf7e8;
border-top: none;
box-sizing: border-box;
}
.patch-top {
height: 4.5em;
width: 40em;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 0;
overflow: hidden;
}
.patch-top .patch-top-rounding {
height: 110em;
width: 110em;
border-radius: 100%;
background: #395a6d;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 0;
border: 1.3em solid #faf7e8;
}
.ribbon {
width: 42.5em;
height: 7.6em;
position: relative;
top: 26.5em;
left: 1.75em;
border: 3.8em solid #395a6d;
border-right-width: 1em;
border-right-color: #faf7e8;
border-left-width: 1em;
border-left-color: #faf7e8;
box-sizing: border-box;
text-align: center;
}
.ribbon:before, .ribbon:after {
border: 5em solid #faf7e8;
top: -5em;
z-index: -1;
}
.ribbon:before {
border-left-width: 1.3em;
border-left-color: transparent;
left: -2.7em;
}
.ribbon:after {
border-right-width: 1.3em;
border-right-color: transparent;
right: -2.7em;
}
.ribbon span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
font-size: 3.2em;
font-family: "Montserrat", sans-serif;
font-weight: 900;
color: #faf7e8;
}
.sun {
font-size: 1.05em;
position: absolute;
height: 0;
width: 0;
box-sizing: border-box;
position: absolute;
transform: translateX(-50%);
left: 50%;
bottom: 9.9em;
}
.sun:after {
height: 2.8em;
width: 2.8em;
border-radius: 100%;
border: 0.6em solid #faf7e8;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #86beb3;
}
.sun .ray {
width: 0.55em;
background: #faf7e8;
border-radius: 1.1em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.sun .ray1 {
height: 7.6em;
width: 0.6em;
}
.sun .ray2 {
transform: translate(-50%, -50%) rotate(22.5deg);
height: 8em;
top: -0.05em;
right: -0.05em;
}
.sun .ray3 {
transform: translate(-50%, -50%) rotate(45deg);
height: 9.7em;
top: -0.25em;
left: 0.28em;
}
.sun .ray4 {
transform: translate(-50%, -50%) rotate(67.5deg);
height: 15.6em;
top: -0.585em;
left: 1.4em;
}
.sun .ray5 {
transform: translate(-50%, -50%) rotate(90deg);
height: 18.6em;
}
.sun .ray6 {
transform: translate(-50%, -50%) rotate(112.5deg);
height: 15.6em;
top: -0.585em;
left: -1.4em;
}
.sun .ray7 {
transform: translate(-50%, -50%) rotate(135deg);
height: 9.7em;
top: -0.25em;
left: -0.28em;
}
.sun .ray8 {
transform: translate(-50%, -50%) rotate(157.5deg);
height: 8em;
}
.curved-text {
font-family: "Montserrat", sans-serif;
font-weight: 800;
color: #faf7e8;
width: 36em;
height: 18em;
position: relative;
margin: 0 auto;
top: 22.6em;
}
.curved-text span {
font-size: 2.8em;
position: absolute;
top: 0;
height: 7.4em;
width: 1em;
margin-left: -0.5em;
line-height: 11.5em;
transform-origin: top center;
position: absolute;
transform: translateX(-50%);
left: 50%;
text-align: center;
}
.curved-text span:nth-child(1) {
transform: rotate(66.75deg);
}
.curved-text span:nth-child(2) {
transform: rotate(57.85deg);
}
.curved-text span:nth-child(3) {
transform: rotate(48.95deg);
}
.curved-text span:nth-child(4) {
transform: rotate(40.05deg);
}
.curved-text span:nth-child(5) {
transform: rotate(31.15deg);
}
.curved-text span:nth-child(6) {
transform: rotate(22.25deg);
}
.curved-text span:nth-child(7) {
transform: rotate(13.35deg);
}
.curved-text span:nth-child(8) {
transform: rotate(4.45deg);
}
.curved-text span:nth-child(9) {
transform: rotate(-4.45deg);
}
.curved-text span:nth-child(10) {
transform: rotate(-13.35deg);
}
.curved-text span:nth-child(11) {
transform: rotate(-22.25deg);
}
.curved-text span:nth-child(12) {
transform: rotate(-31.15deg);
}
.curved-text span:nth-child(13) {
transform: rotate(-40.05deg);
}
.curved-text span:nth-child(14) {
transform: rotate(-48.95deg);
}
.curved-text span:nth-child(15) {
transform: rotate(-57.85deg);
}
.curved-text span:nth-child(16) {
transform: rotate(-66.75deg);
}
.moon {
height: 6.2em;
width: 6.2em;
border-radius: 100%;
background: #faf7e8;
position: absolute;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 4.7em;
}
.moon:before {
height: 3.6em;
width: 3.6em;
border-radius: 100%;
background: #395a6d;
position: absolute;
transform: translateY(-50%);
top: 50%;
right: -0.6em;
}
.cloud__small {
top: 7.4em;
}
.cloud__small.left {
left: 12.5em;
}
.cloud__small.right {
transform: scaleX(-1);
right: 12.5em;
}
.cloud__big {
top: 12.8em;
}
.cloud__big.left {
left: 7.3em;
}
.cloud__big.right {
transform: scaleX(-1);
right: 7.3em;
}
.mountains {
height: 13em;
width: 37.4;
position: absolute;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 9em;
}
.mountains .mountain__left, .mountains .mountain__right, .mountains .mountain__middle {
position: absolute;
bottom: 0;
}
.mountains .mountain__left {
border-bottom: solid 9.2em #86beb3;
border-left: solid 9.3em transparent;
}
.mountains .mountain__left:before {
border-bottom: solid 9.2em #faf7e8;
border-right: solid 9.3em transparent;
}
.mountains .mountain__right {
border-bottom: solid 9.2em #faf7e8;
border-right: solid 9.3em transparent;
right: 0;
}
.mountains .mountain__right:before {
border-bottom: solid 9.2em #86beb3;
border-left: solid 9.3em transparent;
left: -9.3em;
}
.mountains .mountain__middle {
border-bottom: solid 13em #86beb3;
border-left: solid 13em transparent;
border-right: solid 13em transparent;
position: absolute;
transform: translateX(-50%);
left: 50%;
}
.mountains .mountain__middle:before {
border-bottom: solid 13em #faf7e8;
border-right: solid 13em transparent;
}
.tent {
border-bottom: solid 4.5em #395a6d;
border-left: solid 4.8em transparent;
border-right: solid 4.8em transparent;
position: absolute;
transform: translateX(-50%);
left: 50%;
bottom: 0;
}
.tent:before, .tent:after {
bottom: -4.5em;
}
.tent:before {
height: 1.7em;
width: 1.7em;
background: #86beb3;
}
.tent:after {
position: absolute;
transform: translateX(-50%);
left: 50%;
border-bottom: solid 1.7em #faf7e8;
border-left: solid 1.7em transparent;
border-right: solid 1.7em transparent;
}
.tent .tent__flag {
border-left: solid 3em #395a6d;
border-top: solid 0.55em transparent;
border-bottom: solid 0.55em transparent;
position: absolute;
bottom: 0;
}
.tree__left, .tree__right {
border-bottom: solid 1.4em #395a6d;
border-left: solid 1.6em transparent;
border-right: solid 1.6em transparent;
position: absolute;
bottom: 0;
}
.tree__left:before, .tree__left:after, .tree__right:before, .tree__right:after {
border-bottom: solid 1.4em #395a6d;
border-left: solid 1.6em transparent;
border-right: solid 1.6em transparent;
position: absolute;
transform: translateX(-50%);
left: 50%;
}
.tree__left:before, .tree__right:before {
bottom: -0.15em;
}
.tree__left:after, .tree__right:after {
bottom: 1.1em;
}
.tree__left {
right: 4.8em;
}
.tree__right {
right: -8em;
}
.stars {
width: 32.5em;
height: 16em;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 3em;
}
.stars .star1 {
top: 2.7em;
left: 0em;
}
.stars .star2 {
top: 0em;
left: 9.3em;
}
.stars .star3 {
top: 0em;
right: 9.3em;
}
.stars .star4 {
top: 2.7em;
right: 0em;
}
.stars .star5 {
bottom: 0em;
left: 0em;
}
.stars .star6 {
top: 8.2em;
left: 9em;
}
.stars .star7 {
top: 8.2em;
right: 9em;
}
.stars .star8 {
bottom: 0em;
right: 0em;
}
.link-container {
position: fixed;
bottom: 0;
right: 0;
width: auto;
padding: 0.75em;
font-size: 1.5em;
color: #395a6d;
font-family: sans-serif;
}
.link-container a {
color: #86beb3;
font-weight: 600;
text-decoration: none;
}HUY HIỆU TẢI XUỐNG ỨNG DỤNG
Huy hiệu tải xuống ứng dụng với các biểu tượng Font Awesome.
HTML
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="app-download">
<label id="first-title">Download Our App</label>
<label id="second-title">!Download Now</label>
<i class="fa fa-mobile-phone bounce"></i>
<a class="close-download-app fa fa-close"></a>
</div>
CSS
.app-download {
display: flex;
justify-content: space-around;
align-items: center;
direction: rtl;
background-color: #dc1e4d;
top: 0;
position: fixed;
flex-direction: column;
z-index: 100;
left: 2rem;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
box-shadow: 1px 2px 14px 5px #00000070;
padding: 1rem;
&:focus {
outline: none;
}
label{
margin-top: .5rem;
margin-bottom: .5rem;
color: #fff;
cursor: pointer;
&#first-title {
font-size: 1rem;
}
&#second-title{
font-size:.8rem;
}
}
.fa-mobile-phone {
color: #fff;
font-size: 2.5rem;
width: 45px;
height: 45px;
display: flex;
border: 2px dotted #fff;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: .5rem 0;
cursor: pointer;
}
.close-download-app {
color: #fff;
margin-top: .5rem;
font-size: .7rem;
cursor: pointer;
}
}
.bounce {
animation: bounce 0.5s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
animation-iteration-count: infinite;
-webkit-animation-name: bounce;
-webkit-animation-duration: 0.5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
-webkit-animation-iteration-count: infinite;
}
@keyframes bounce {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, 3px, 0);
}
}
@-webkit-keyframes bounce {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
-webkit-transform: translate3d(0, 3px, 0);
transform: translate3d(0, 3px, 0);
}
}HUY HIỆU GDPR
Huy hiệu GDPR trong HTML và CSS.
HTML
<!-- Based upon a design by Varun Mohapatra @Dribbble: https://dribbble.com/shots/4368945-GDPR-Compliance-and-Readiness-Badges -->
<main>
<div class="badge" data-color="default">
<div class="badge-icon">
<span class="lock"></span>
</div>
<div class="badge-text">
<span><b>gdpr</b></span><br>
<span>compliant</span>
</div>
</div>
<div class="badge" data-color="dark">
<div class="badge-icon">
<span class="lock"></span>
</div>
<div class="badge-text">
<span><b>gdpr</b></span><br>
<span>ready</span>
</div>
</div>
<div class="badge" data-color="light">
<div class="badge-icon">
<span class="lock"></span>
</div>
<div class="badge-text">
<span><b>gdpr</b></span><br>
<span>progress</span>
</div>
</div>
</main>CSS
:root{
--color-primary: #214fe0;
--color-dark: #1d1f20;
--color-light: #f4f4f4;
--color-shade: #bbb;
--badge-size: 250px;
--lock-color: #fff;
--lock-width: 30px;
--lock-stroke: 2.5px;
}
::selection{
background:
}
body{
background-color: var(--color-light);
}
main{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
.badge-icon,
.badge-text{
padding:1.5rem;
float:left;
-webkit-box-flex:1;
flex:1
}
.badge{
display:flex;
margin-bottom: 1.5rem;
margin-right: 1.5rem;
color: var(--color-light);
min-width: var(--badge-size);
border-radius: 5px;
box-shadow: 0px 0px 60px var(--color-shade);
overflow: hidden;
}
.badge-icon{
background: url('https://upload.wikimedia.org/wikipedia/commons/9/93/European_stars.svg') var(--color-primary) no-repeat center center;
background-size: contain;
max-width: calc( var(--badge-size) / 5);
}
.badge-text{
font: normal small-caps normal 16px/1.5 Arial, Helvetica, sans-serif;
text-transform: uppercase;
line-height: 1;
text-align: left;
}
.badge[data-color=""] .badge-text,
.badge[data-color="default"] .badge-text{
color: var(--color-light);
background-color: var(--color-primary);
}
.badge[data-color="light"] .badge-text{
color: var(--color-dark);
background-color: var(--color-light);
}
.badge[data-color="dark"] .badge-text{
color: var(--color-light);
background-color: var(--color-dark);
}
/*The body of the lock*/
.lock {
display:block;
width: var(--lock-width);
height: calc(var(--lock-width) * 0.75);
top: 50%; left:50%;
transform: translate(-50%,-50%);
border: var(--lock-stroke) solid var(--lock-color);
border-radius: 5px;
position: relative;
transition: all 0.1s ease-in-out;
}
/*The keyhole*/
.lock:after {
content: "";
display: block;
background: var(--lock-color);
width: var(--lock-stroke);
height: calc(var(--lock-stroke) * 3);
position: absolute;
top: 50%; left: 50%;
transform: translate(-50% , -50%);
transition: all 0.1s ease-in-out;
}
/*The arm of the lock*/
.lock:before {
content: "";
display: block;
width: calc(var(--lock-width) / 2);
height: calc(var(--lock-width) / 3);
position: absolute;
bottom: 100%; left: 50%;
transform: translateX(-50%);
border: var(--lock-stroke) solid var(--lock-color);
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom: 0;
}
HUY HIỆU HOẠT ẢNH SVG
Huy hiệu SVG với hoạt ảnh CSS.
HTML
<svg class="badge" xmlns="http://www.w3.org/2000/svg" height="440" width="440" viewBox="-40 -40 440 440">
<circle class="outer" fill="#F9D535" stroke="#fff" stroke-width="8" stroke-linecap="round" cx="180" cy="180" r="157"/>
<circle class="inner" fill="#DFB828" stroke="#fff" stroke-width="8" cx="180" cy="180" r="108.3"/>
<path class="inline" d="M89.4 276.7c-26-24.2-42.2-58.8-42.2-97.1 0-22.6 5.6-43.8 15.5-62.4m234.7.1c9.9 18.6 15.4 39.7 15.4 62.2 0 38.3-16.2 72.8-42.1 97" stroke="#CAA61F" stroke-width="7" stroke-linecap="round" fill="none"/>
<g class="star">
<path fill="#F9D535" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M180 107.8l16.9 52.1h54.8l-44.3 32.2 16.9 52.1-44.3-32.2-44.3 32.2 16.9-52.1-44.3-32.2h54.8z"/>
<circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="180" cy="107.8" r="4.4"/>
<circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="223.7" cy="244.2" r="4.4"/>
<circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="135.5" cy="244.2" r="4.4"/>
<circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="108.3" cy="160.4" r="4.4"/>
<circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="251.7" cy="160.4" r="4.4"/>
</g>
</svg>CSS
/* --------------------------
Base
--------------------------- */
body {
background: #8069a1;
padding-top: 60px;
}
svg {
margin: auto;
display: block;
}
/* --------------------------
Keyframes
--------------------------- */
@keyframes grow {
0% {
transform: scale(0);
}
30% {
transform: scale(1.1);
}
60% {
transform: scale(0.9);
}
}
@keyframes turn {
0% {
transform: rotate(0) scale(0);
opacity: 0;
}
60% {
transform: rotate(375deg) scale(1.1);
}
80% {
transform: rotate(355deg) scale(0.9);
}
100% {
transform: rotate(360deg) scale(1);
}
}
@keyframes pulse {
50% {
transform: scale(1.4);
}
}
/* --------------------------
SVG Styles
--------------------------- */
.badge * {
transform-origin: 50% 50%;
}
.outer,
.inner,
.inline {
animation: grow 1s ease-out backwards;
}
.inner {
animation-delay: 0.1s;
}
.inline {
animation-delay: 0.15s;
}
.star {
animation: turn 1.1s .2s ease-out backwards;
}
.star circle {
animation: pulse .7s 1.5s;
}
.star circle:nth-of-type(2) {
animation-delay: 1.6s;
}
.star circle:nth-of-type(3) {
animation-delay: 1.7s;
}
.star circle:nth-of-type(4) {
animation-delay: 1.8s;
}
.star circle:nth-of-type(5) {
animation-delay: 1.9s;
}HUY HIỆU HÌNH LỤC GIÁC
Huy hiệu hình lục giác với các biểu tượng Font Awesome.
HTML
<div class="main-wrapper">
<div class="badge yellow">
<div class="circle"> <i class="fa fa-bolt"></i></div>
<div class="ribbon">Initiator</div>
</div>
<div class="badge orange">
<div class="circle"> <i class="fa fa-wheelchair-alt"></i></div>
<div class="ribbon">Disabler</div>
</div>
<div class="badge pink">
<div class="circle"> <i class="fa fa-pied-piper"></i></div>
<div class="ribbon">Nuker</div>
</div>
<div class="badge red">
<div class="circle"> <i class="fa fa-shield"></i></div>
<div class="ribbon">Ganker</div>
</div>
<div class="badge purple">
<div class="circle"> <i class="fa fa-anchor"></i></div>
<div class="ribbon">Durable</div>
</div>
<div class="badge teal">
<div class="circle"> <i class="fa fa-bicycle"></i></div>
<div class="ribbon">Roamer</div>
</div>
<div class="badge blue">
<div class="circle"> <i class="fa fa-users"></i></div>
<div class="ribbon">Pusher</div>
</div>
<div class="badge blue-dark">
<div class="circle"> <i class="fa fa-rocket"></i></div>
<div class="ribbon">Escape</div>
</div>
<div class="badge green">
<div class="circle"> <i class="fa fa-tree"></i></div>
<div class="ribbon">Jungler</div>
</div>
<div class="badge green-dark">
<div class="circle"> <i class="fa fa-user fa-street-view"></i></div>
<div class="ribbon">Offlaner</div>
</div>
<div class="badge silver">
<div class="circle"> <span class="font">AFK</span></div>
<div class="ribbon">Carry</div>
</div>
<div class="badge gold">
<div class="circle"> <i class="fa fa-magic"></i></div>
<div class="ribbon">Support</div>
</div>
</div>
<footer><a href="https://www.linkedin.com/in/oliviale/" target="_blank"><i class="fa fa-linkedin icons"></i></a><a href="https://twitter.com/meowlivia_" target="_blank"><i class="fa fa-twitter icons"></i></a><a href="https://github.com/oliviale" target="_blank"><i class="fa fa-github icons"></i></a><a href="https://dribbble.com/oliviale" target="_blank"><i class="fa fa-dribbble icons"></i></a></footer>CSS
body {
font-family: "Comfortaa", sans-serif;
background: #111;
}
.main-wrapper {
width: 90%;
max-width: 900px;
margin: 3em auto;
text-align: center;
}
.badge {
position: relative;
margin: 1.5em 3em;
width: 4em;
height: 6.2em;
border-radius: 10px;
display: inline-block;
top: 0;
transition: all 0.2s ease;
}
.badge:before, .badge:after {
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.badge:before {
transform: rotate(60deg);
}
.badge:after {
transform: rotate(-60deg);
}
.badge:hover {
top: -4px;
}
.badge .circle {
width: 60px;
height: 60px;
position: absolute;
background: #fff;
z-index: 10;
border-radius: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.badge .circle i.fa {
font-size: 2em;
margin-top: 8px;
}
.badge .font {
display: inline-block;
margin-top: 1em;
}
.badge .ribbon {
position: absolute;
border-radius: 4px;
padding: 5px 5px 4px;
width: 100px;
z-index: 11;
color: #fff;
bottom: 12px;
left: 50%;
margin-left: -55px;
height: 15px;
font-size: 14px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27);
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
background: linear-gradient(to bottom right, #555 0%, #333 100%);
cursor: default;
}
.yellow {
background: linear-gradient(to bottom right, #ffeb3b 0%, #fbc02d 100%);
color: #ffb300;
}
.orange {
background: linear-gradient(to bottom right, #ffc107 0%, #f57c00 100%);
color: #f68401;
}
.pink {
background: linear-gradient(to bottom right, #F48FB1 0%, #d81b60 100%);
color: #dc306f;
}
.red {
background: linear-gradient(to bottom right, #f4511e 0%, #b71c1c 100%);
color: #c62828;
}
.purple {
background: linear-gradient(to bottom right, #ab47bc 0%, #4527a0 100%);
color: #7127a8;
}
.teal {
background: linear-gradient(to bottom right, #4DB6AC 0%, #00796B 100%);
color: #34a297;
}
.blue {
background: linear-gradient(to bottom right, #4FC3F7 0%, #2196F3 100%);
color: #259af3;
}
.blue-dark {
background: linear-gradient(to bottom right, #1976D2 0%, #283593 100%);
color: #1c68c5;
}
.green {
background: linear-gradient(to bottom right, #cddc39 0%, #8bc34a 100%);
color: #7cb342;
}
.green-dark {
background: linear-gradient(to bottom right, #4CAF50 0%, #1B5E20 100%);
color: #00944a;
}
.silver {
background: linear-gradient(to bottom right, #E0E0E0 0%, #BDBDBD 100%);
color: #9e9e9e;
}
.gold {
background: linear-gradient(to bottom right, #e6ce6a 0%, #b7892b 100%);
color: #b7892b;
}
footer {
text-align: center;
margin: 5em auto;
}
footer a {
text-decoration: none;
display: inline-block;
width: 45px;
height: 45px;
border-radius: 50%;
background: #111;
border: 0.5px dashed #f8f8f8;
color: #999;
margin: 5px;
}
footer a:hover {
background: #222;
}
footer a .icons {
margin-top: 12px;
display: inline-block;
font-size: 20px;
}Hy vọng các mã thiết kế về huy hiệu, phù hiệu trên giúp ích được cho các bạn