Pure CSS Apple SWIFT logo
| Autor: | Guilh |
|---|---|
| Views Total: | 2,228 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 5, 2014 |
| Licencia: | Unknown |
Vista prévia
Descripción
En este post vamos a usar HTML y CSS/CSS3 para dibujar un logo SWIFT, que es un nuevo lenguaje de programación de aplicaciones publicado por Apple Inc. en WWDC 2014.
Getting Started:
Incluye el StyleFix 1.0.3 & PrefixFree 1.0.7 en la sección Head de la página.
El HTML.
<div class="icon"> <div class="body"></div> <div class="head"></div> <div class="tail"></div> <div class="longshadow"></div> </div>
El SCSS.
// By @guilh
* {
margin: 0;
padding: 0;
}
$global-bg: white;
%abs {
position: absolute;
}
%rel {
position: relative;
}
%p-el {
&::before,
&::after {
content: "";
display: block;
@extend %abs;
}
}
%body {
border-radius: 50%;
@extend %abs;
}
%mask {
width: 25px;
height: 100px;
background: $global-bg;
z-index: 4000;
}
.icon {
width: 254px;
height: 254px;
margin: 4% auto;
border-radius: 3.6em;
@extend %rel;
box-shadow: 0 26px 30px -25px rgba(0,0,0,.6);
background: linear-gradient(to bottom, #fbaf40 0%,#ff291a 100%);
@extend %p-el;
&::before {
left: -25px;
top: 23px;
@extend %mask;
}
&::after {
@extend %mask;
transform: rotate(90deg);
top: -63px;
left: 55px;
}
}
.body {
width: 220px;
height: 172px;
@extend %body;
top: -5%;
left: -12.5%;
border-top: solid 19px transparent;
border-right: solid 45px $global-bg;
transform: rotate(62deg);
@extend %p-el;
z-index: 1000;
&::before {
width: 171px;
height: 222px;
@extend %body;
top: -17%;
left: 21%;
border-right: solid 19px transparent;
border-top: solid 45px $global-bg;
transform: rotate(55deg);
}
}
%head {
width: 82px;
height: 75px;
z-index: 5000;
border-radius: 50%;
border-right: solid 24px $global-bg;
border-top: solid 24px transparent;
}
.head {
top: 63%;
right: 10.9%;
@extend %abs;
@extend %p-el;
@extend %head;
transform: rotate(-94deg) skewY(25deg) skewX(-12deg);
&::before {
width: 76px;
@extend %head;
top: -25%;
left: -6%;
transform: rotate(-20deg) skewY(24deg) skewX(-15deg);
}
}
.tail {
width: 200px;
height: 80px;
border-radius: 50% 55% 70% 45%;
border-bottom: solid 25px $global-bg;
transform: rotate(33deg) skewX(59deg);
@extend %abs;
top: 12.5%;
left: 5.3%;
z-index: 4000;
@extend %p-el;
&::after {
width: 130px;
height: 58px;
bottom: -5%;
right: 10%;
border-radius: 50% 55% 70% 45%;
transform: rotate(6deg) skewX(6deg);
border-bottom: solid 20px $global-bg;
}
}
.longshadow {
width: 230px;
height: 160px;
background: rgba(164, 52, 21,.15);
border-radius: 178px 8em 8em 190px / 122px 8em 8em 138px;
z-index: 100;
@extend %abs;
top: 7.6%;
left: -7.2%;
transform: rotate(43deg);
} O el CSS.
* {
margin: 0;
padding: 0;
}
.icon::before, .body::before, .head::before, .tail::before, .icon::after, .body::after, .head::after, .tail::after, .body, .head, .tail, .longshadow {
position: absolute;
}
.icon {
position: relative;
}
.icon::before, .body::before, .head::before, .tail::before, .icon::after, .body::after, .head::after, .tail::after {
content: "";
display: block;
}
.body, .body::before {
border-radius: 50%;
}
.icon::before, .icon::after {
width: 25px;
height: 100px;
background: white;
z-index: 4000;
}
.icon {
width: 254px;
height: 254px;
margin: 4% auto;
border-radius: 3.6em;
box-shadow: 0 26px 30px -25px rgba(0, 0, 0, 0.6);
background: linear-gradient(to bottom, #fbaf40 0%, #ff291a 100%);
}
.icon::before {
left: -25px;
top: 23px;
}
.icon::after {
transform: rotate(90deg);
top: -63px;
left: 55px;
}
.body {
width: 220px;
height: 172px;
top: -5%;
left: -12.5%;
border-top: solid 19px transparent;
border-right: solid 45px white;
transform: rotate(62deg);
z-index: 1000;
}
.body::before {
width: 171px;
height: 222px;
top: -17%;
left: 21%;
border-right: solid 19px transparent;
border-top: solid 45px white;
transform: rotate(55deg);
}
.head, .head::before {
width: 82px;
height: 75px;
z-index: 5000;
border-radius: 50%;
border-right: solid 24px white;
border-top: solid 24px transparent;
}
.head {
top: 63%;
right: 10.9%;
transform: rotate(-94deg) skewY(25deg) skewX(-12deg);
}
.head::before {
width: 76px;
top: -25%;
left: -6%;
transform: rotate(-20deg) skewY(24deg) skewX(-15deg);
}
.tail {
width: 200px;
height: 80px;
border-radius: 50% 55% 70% 45%;
border-bottom: solid 25px white;
transform: rotate(33deg) skewX(59deg);
top: 12.5%;
left: 5.3%;
z-index: 4000;
}
.tail::after {
width: 130px;
height: 58px;
bottom: -5%;
right: 10%;
border-radius: 50% 55% 70% 45%;
transform: rotate(6deg) skewX(6deg);
border-bottom: solid 20px white;
}
.longshadow {
width: 230px;
height: 160px;
background: rgba(164, 52, 21, 0.15);
border-radius: 178px 8em 8em 190px / 122px 8em 8em 138px;
z-index: 100;
top: 7.6%;
left: -7.2%;
transform: rotate(43deg);
} Este logotipo Pure CSS Apple SWIFT fue diseñado por Guilh. Usted puede comprobar hacia fuera su portafolio en github < a title = "Juicy Dash Portafolio" href = "https://github.com/Guilh" target = "_ blank" rel = "noopener" > aquí .
