CSS Star Wars

Todos sabem que Star Wars foi um filme revolucionário para a sua época. Já em sua abertura o filme chama atenção com uma introdução em letras amarelas e uma perspectiva que faz com que o texto se perca no espaço.

Apesar de já replicada infinitas vezes, o objetivo desse artigo também é tentar replicar essa instrodução utilizando apenas CSS e HTML, sem a utilização de Javascript.

Cor de fundo

Para replicarmos a introdução do Star Wars vamos começar com pequenos passos.

Primeiro, simplesmente mudamos o background da nossa página para preto. Vamos nessa etapa mudar temporariamente a fonte para branco para evitar que o texto suma no nosso espaço.

Essas alterações podem ser feitas apenas com a seguinte classe:

1
2
3
4
.black-sky {
  background-color: black;
  color: white;
}

Estrelas

Na sequência adicionamos as estrelas do nosso espaço.

Para as estrelas, vamos utilizar um truque famoso do CSS utilizando o box-shadow. O truque consiste em basicamente criar uma div de um pixel de largura e altura (o tamanho de nossas estrelas), posicionado de forma absoluta na nossa tela.

Essa div terá diversas sombras de cor branca em posições espalhadas da tela, que terão o mesmo tamanho da nossa div. Dessa forma temos o efeito de várias estrelas brancas. Este artigo explica mais profundamente como esse truque funciona.

Esse truque pode ser expandido, adicionando outras divs com tamanhos maiores de estrelas, ou com efeitos de brilho.

1
2
3
4
5
6
7
8
9
.stars {
  position: absolute;
  top: 100px;
  left: -700px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 970px 909px #FFF , 1px 149px #FFF , 736px 348px #FFF , 1352px 1333px #FFF , 57px 1598px #FFF , 1007px 332px #FFF , 1474px 782px #FFF , 726px 826px #FFF , 768px 344px #FFF , 1673px 1878px #FFF , 1970px 722px #FFF , 123px 79px #FFF , 1137px 1554px #FFF , 490px 521px #FFF , 1277px 1346px #FFF , 14px 1701px #FFF , 114px 1127px #FFF , 849px 20px #FFF , 1697px 199px #FFF , 1013px 741px #FFF , 1643px 1821px #FFF , 1335px 1355px #FFF , 825px 290px #FFF , 1670px 1346px #FFF , 345px 1925px #FFF , 1063px 1880px #FFF , 265px 1203px #FFF , 1328px 493px #FFF , 1152px 806px #FFF , 661px 602px #FFF , 520px 1515px #FFF , 1256px 1907px #FFF , 1882px 1525px #FFF , 1024px 239px #FFF , 1959px 1343px #FFF , 623px 1380px #FFF , 1717px 1542px #FFF , 1318px 660px #FFF , 1586px 1581px #FFF , 340px 284px #FFF , 553px 1556px #FFF , 609px 800px #FFF , 613px 244px #FFF , 927px 1327px #FFF , 957px 1869px #FFF , 1029px 575px #FFF , 1851px 1438px #FFF , 1043px 819px #FFF , 1297px 1312px #FFF , 1361px 1224px #FFF , 974px 344px #FFF , 715px 1931px #FFF , 1583px 1370px #FFF , 1359px 1395px #FFF , 433px 1356px #FFF , 1818px 197px #FFF , 973px 1115px #FFF , 353px 1356px #FFF , 558px 1060px #FFF , 1584px 414px #FFF , 1272px 1404px #FFF , 1792px 22px #FFF , 147px 1524px #FFF , 751px 1032px #FFF , 1945px 700px #FFF , 366px 241px #FFF , 1119px 532px #FFF , 1029px 703px #FFF , 575px 888px #FFF , 1568px 1488px #FFF , 1527px 1002px #FFF , 471px 783px #FFF , 90px 1160px #FFF , 1646px 1805px #FFF , 714px 667px #FFF , 644px 1716px #FFF , 1917px 1700px #FFF , 1241px 1645px #FFF , 1285px 1327px #FFF , 1560px 132px #FFF , 1645px 1753px #FFF , 1703px 466px #FFF , 1099px 929px #FFF , 1629px 1954px #FFF , 1103px 338px #FFF , 1427px 1660px #FFF , 652px 1031px #FFF , 958px 1744px #FFF , 1015px 1712px #FFF , 1452px 1076px #FFF , 229px 1483px #FFF , 84px 1847px #FFF , 1671px 1333px #FFF , 1600px 345px #FFF , 1307px 168px #FFF , 915px 921px #FFF , 1367px 1826px #FFF , 1085px 1685px #FFF , 1514px 753px #FFF , 859px 1015px #FFF , 1871px 1239px #FFF , 1522px 381px #FFF , 981px 906px #FFF , 1207px 712px #FFF , 1197px 820px #FFF , 1573px 1186px #FFF , 864px 1824px #FFF , 1534px 1340px #FFF , 629px 607px #FFF , 1409px 997px #FFF , 882px 1459px #FFF , 150px 310px #FFF , 785px 1231px #FFF , 884px 523px #FFF , 1963px 1004px #FFF , 1529px 1395px #FFF , 632px 665px #FFF , 388px 1668px #FFF , 1468px 810px #FFF , 1165px 1575px #FFF , 1498px 252px #FFF , 275px 353px #FFF , 1171px 350px #FFF , 524px 1698px #FFF , 1652px 1900px #FFF , 1800px 1788px #FFF , 1743px 695px #FFF , 1806px 516px #FFF , 537px 1528px #FFF , 127px 763px #FFF , 1643px 1043px #FFF , 1717px 137px #FFF , 1553px 952px #FFF , 183px 1507px #FFF , 770px 322px #FFF , 241px 1999px #FFF , 148px 244px #FFF , 118px 1096px #FFF , 1183px 100px #FFF , 1158px 53px #FFF , 371px 735px #FFF , 1090px 1474px #FFF , 1145px 616px #FFF , 1300px 236px #FFF , 407px 672px #FFF , 1012px 142px #FFF , 100px 329px #FFF , 219px 506px #FFF , 482px 349px #FFF , 1397px 1560px #FFF , 566px 750px #FFF , 562px 1403px #FFF , 1154px 961px #FFF , 559px 169px #FFF , 568px 503px #FFF , 184px 1898px #FFF , 256px 793px #FFF , 668px 66px #FFF , 38px 544px #FFF , 832px 702px #FFF , 1676px 1579px #FFF , 1996px 910px #FFF , 806px 1313px #FFF , 1063px 79px #FFF , 539px 1035px #FFF , 552px 1740px #FFF , 774px 632px #FFF , 1453px 1152px #FFF , 491px 1160px #FFF , 1667px 793px #FFF , 655px 316px #FFF , 609px 470px #FFF , 1330px 53px #FFF , 420px 1814px #FFF , 1155px 447px #FFF , 1754px 360px #FFF , 913px 1425px #FFF , 1408px 1270px #FFF , 414px 128px #FFF , 31px 1664px #FFF , 1671px 899px #FFF , 125px 1133px #FFF , 1942px 351px #FFF , 1439px 466px #FFF , 886px 1853px #FFF , 1587px 677px #FFF , 241px 570px #FFF , 1886px 1293px #FFF , 1526px 84px #FFF , 508px 1419px #FFF , 759px 634px #FFF , 1314px 1121px #FFF , 1127px 545px #FFF , 993px 758px #FFF , 1770px 795px #FFF , 1629px 211px #FFF , 824px 1656px #FFF , 324px 1166px #FFF , 27px 1316px #FFF , 1258px 1468px #FFF , 428px 1923px #FFF , 661px 704px #FFF , 1872px 1640px #FFF , 1910px 1660px #FFF , 117px 995px #FFF , 253px 1792px #FFF , 1403px 1433px #FFF , 1441px 752px #FFF , 1472px 547px #FFF , 1715px 541px #FFF , 272px 187px #FFF , 881px 306px #FFF , 19px 1209px #FFF , 1807px 1423px #FFF , 693px 1752px #FFF , 160px 1252px #FFF , 1710px 237px #FFF , 32px 1786px #FFF , 1440px 1452px #FFF , 712px 1836px #FFF , 1324px 1411px #FFF , 728px 274px #FFF , 59px 244px #FFF , 1514px 16px #FFF , 1472px 923px #FFF , 1276px 1755px #FFF , 1099px 1301px #FFF , 1972px 1715px #FFF , 511px 1297px #FFF , 465px 1329px #FFF , 129px 1422px #FFF , 635px 959px #FFF , 206px 1663px #FFF , 1089px 150px #FFF , 911px 365px #FFF , 1520px 1828px #FFF , 133px 560px #FFF , 715px 1941px #FFF , 818px 1332px #FFF , 1407px 1564px #FFF , 64px 788px #FFF , 1048px 1656px #FFF , 1290px 1205px #FFF , 1230px 93px #FFF , 532px 570px #FFF , 170px 1545px #FFF , 507px 1924px #FFF , 197px 669px #FFF , 1945px 1559px #FFF , 400px 346px #FFF , 610px 1596px #FFF , 587px 245px #FFF , 272px 661px #FFF , 1889px 1419px #FFF , 1831px 234px #FFF , 1222px 840px #FFF , 1849px 1366px #FFF , 107px 1058px #FFF , 1589px 1327px #FFF , 1160px 324px #FFF , 438px 768px #FFF , 1225px 1707px #FFF , 662px 384px #FFF , 567px 786px #FFF , 1115px 95px #FFF , 195px 48px #FFF , 1623px 470px #FFF , 362px 746px #FFF , 546px 270px #FFF , 1120px 1542px #FFF , 1925px 1770px #FFF , 830px 1439px #FFF , 1419px 1360px #FFF , 128px 1049px #FFF , 1684px 578px #FFF , 714px 1156px #FFF , 102px 81px #FFF , 351px 1428px #FFF , 982px 472px #FFF , 1142px 1717px #FFF , 1195px 1182px #FFF , 337px 286px #FFF , 1309px 1402px #FFF , 1863px 1475px #FFF , 623px 1518px #FFF , 133px 1847px #FFF , 927px 1120px #FFF , 1439px 725px #FFF , 1722px 1576px #FFF , 706px 285px #FFF , 637px 455px #FFF , 574px 1498px #FFF , 674px 1851px #FFF , 1748px 683px #FFF , 563px 1521px #FFF , 1627px 1826px #FFF , 1360px 901px #FFF , 1551px 1458px #FFF , 1995px 517px #FFF , 1928px 303px #FFF , 1256px 1241px #FFF , 1283px 1911px #FFF , 923px 1235px #FFF , 758px 949px #FFF , 1133px 1794px #FFF , 1203px 623px #FFF , 344px 103px #FFF , 1032px 834px #FFF , 714px 555px #FFF , 702px 931px #FFF , 1431px 1808px #FFF , 1827px 1436px #FFF , 750px 192px #FFF , 1816px 769px #FFF , 1537px 64px #FFF , 670px 753px #FFF , 1832px 783px #FFF , 807px 1154px #FFF , 641px 1749px #FFF , 509px 399px #FFF , 1308px 79px #FFF , 319px 482px #FFF , 662px 829px #FFF , 1379px 1284px #FFF , 1812px 1594px #FFF , 359px 448px #FFF , 277px 1027px #FFF , 679px 795px #FFF , 1854px 689px #FFF , 275px 584px #FFF , 1772px 217px #FFF , 340px 920px #FFF , 1483px 968px #FFF , 567px 252px #FFF , 658px 507px #FFF , 1892px 860px #FFF , 1800px 261px #FFF , 1325px 1416px #FFF , 1053px 1894px #FFF , 459px 442px #FFF , 1172px 1566px #FFF , 1325px 695px #FFF , 764px 851px #FFF , 539px 582px #FFF , 1439px 999px #FFF , 67px 494px #FFF , 1251px 1832px #FFF , 731px 615px #FFF , 1024px 1997px #FFF , 1647px 365px #FFF , 932px 34px #FFF , 859px 247px #FFF , 249px 1998px #FFF , 555px 885px #FFF , 1663px 1423px #FFF , 1509px 381px #FFF , 694px 308px #FFF , 1430px 262px #FFF , 1944px 1413px #FFF , 1279px 1157px #FFF , 1298px 508px #FFF , 175px 967px #FFF , 568px 799px #FFF , 1417px 519px #FFF , 459px 368px #FFF , 681px 1629px #FFF , 41px 449px #FFF , 1630px 1507px #FFF , 1834px 1214px #FFF , 486px 1965px #FFF , 1581px 1047px #FFF , 995px 683px #FFF , 721px 1985px #FFF , 837px 624px #FFF , 885px 188px #FFF , 862px 1339px #FFF , 908px 1594px #FFF , 697px 267px #FFF , 386px 293px #FFF , 234px 1636px #FFF , 1805px 855px #FFF , 267px 350px #FFF , 493px 207px #FFF , 1541px 1176px #FFF , 377px 982px #FFF , 768px 878px #FFF , 1263px 812px #FFF , 175px 228px #FFF , 1601px 571px #FFF , 1696px 391px #FFF , 38px 415px #FFF , 1427px 1882px #FFF , 1306px 628px #FFF , 1257px 1933px #FFF , 1690px 1370px #FFF , 1812px 1778px #FFF , 1124px 1557px #FFF , 830px 567px #FFF , 1124px 842px #FFF , 1983px 1339px #FFF , 1855px 195px #FFF , 1545px 1092px #FFF , 1861px 1448px #FFF , 519px 1259px #FFF , 1141px 1117px #FFF , 1916px 1573px #FFF , 1112px 1870px #FFF , 1016px 1083px #FFF , 935px 1575px #FFF , 1275px 1355px #FFF , 363px 465px #FFF , 1085px 1388px #FFF , 1918px 952px #FFF , 104px 542px #FFF , 1013px 1562px #FFF , 1700px 1159px #FFF , 908px 289px #FFF , 1105px 1146px #FFF , 1420px 1676px #FFF , 1281px 457px #FFF , 1749px 1537px #FFF , 146px 45px #FFF , 51px 809px #FFF , 300px 991px #FFF , 1019px 1985px #FFF , 722px 216px #FFF , 1752px 1874px #FFF , 393px 798px #FFF , 483px 1645px #FFF , 324px 310px #FFF , 1688px 644px #FFF , 1848px 945px #FFF , 805px 1663px #FFF , 1927px 1468px #FFF , 999px 1120px #FFF , 1139px 677px #FFF , 1011px 1034px #FFF , 1123px 556px #FFF , 585px 1660px #FFF , 20px 67px #FFF , 1460px 1071px #FFF , 871px 726px #FFF , 1270px 587px #FFF , 814px 763px #FFF , 671px 799px #FFF , 1683px 1813px #FFF , 516px 1113px #FFF , 1490px 727px #FFF , 1825px 329px #FFF , 113px 1169px #FFF , 759px 1790px #FFF , 1195px 1933px #FFF , 1389px 1047px #FFF , 753px 1133px #FFF , 1858px 532px #FFF , 160px 83px #FFF , 1928px 1030px #FFF , 296px 351px #FFF , 1227px 673px #FFF , 1459px 397px #FFF , 1407px 316px #FFF , 1238px 1604px #FFF , 1060px 973px #FFF , 1579px 1000px #FFF , 1950px 10px #FFF , 1983px 462px #FFF , 1071px 330px #FFF , 1206px 343px #FFF , 454px 806px #FFF , 1404px 1721px #FFF , 969px 1813px #FFF , 1282px 1124px #FFF , 363px 1735px #FFF , 1688px 1952px #FFF , 1472px 264px #FFF , 762px 648px #FFF , 62px 588px #FFF , 1331px 1490px #FFF , 1189px 622px #FFF , 866px 320px #FFF , 1343px 1514px #FFF , 1201px 1297px #FFF , 1148px 904px #FFF , 1233px 1422px #FFF , 1450px 942px #FFF , 653px 1273px #FFF , 95px 279px #FFF , 853px 1428px #FFF , 1743px 163px #FFF , 1230px 737px #FFF , 812px 1580px #FFF , 1208px 33px #FFF , 1839px 1996px #FFF , 348px 1390px #FFF , 420px 1762px #FFF , 1915px 1121px #FFF , 776px 1562px #FFF , 1421px 1223px #FFF , 502px 94px #FFF , 1832px 1915px #FFF , 175px 367px #FFF , 592px 1593px #FFF , 1966px 922px #FFF , 365px 1586px #FFF , 1889px 220px #FFF , 1742px 1810px #FFF , 1801px 371px #FFF , 888px 1587px #FFF , 1567px 1363px #FFF , 26px 99px #FFF , 1542px 14px #FFF , 128px 461px #FFF , 300px 454px #FFF , 929px 502px #FFF , 290px 433px #FFF , 1856px 104px #FFF , 1971px 1303px #FFF , 1013px 1086px #FFF , 842px 1535px #FFF , 710px 1915px #FFF , 1796px 308px #FFF , 58px 501px #FFF , 1010px 801px #FFF , 405px 251px #FFF , 892px 909px #FFF , 1653px 1133px #FFF , 355px 1729px #FFF , 890px 1955px #FFF , 182px 811px #FFF , 1824px 365px #FFF , 1992px 383px #FFF , 1241px 1001px #FFF , 1805px 164px #FFF , 418px 1830px #FFF , 1575px 1143px #FFF , 1513px 1119px #FFF , 1927px 242px #FFF , 559px 48px #FFF , 1129px 666px #FFF , 643px 1716px #FFF , 150px 744px #FFF , 312px 136px #FFF , 1777px 848px #FFF , 1388px 1238px #FFF , 910px 1209px #FFF , 908px 1574px #FFF , 1466px 425px #FFF , 1903px 883px #FFF , 598px 1541px #FFF , 1743px 771px #FFF , 884px 1281px #FFF , 297px 1236px #FFF , 1298px 1422px #FFF , 636px 794px #FFF , 1713px 1526px #FFF , 1710px 785px #FFF , 1975px 1910px #FFF , 1890px 990px #FFF , 1932px 869px #FFF , 623px 1478px #FFF , 241px 1400px #FFF , 1345px 1866px #FFF , 1513px 1537px #FFF , 1642px 500px #FFF , 200px 42px #FFF , 1617px 1818px #FFF , 182px 499px #FFF , 1482px 216px #FFF , 31px 338px #FFF , 564px 805px #FFF , 249px 636px #FFF , 899px 694px #FFF , 1461px 967px #FFF , 1340px 195px #FFF , 1755px 635px #FFF , 1587px 1216px #FFF , 1118px 1054px #FFF , 279px 488px #FFF , 908px 1196px #FFF , 1156px 1995px #FFF , 1207px 1572px #FFF , 125px 1773px #FFF , 380px 283px #FFF , 1900px 184px #FFF , 687px 743px #FFF , 107px 246px #FFF , 1613px 233px #FFF , 125px 1491px #FFF , 77px 1928px #FFF , 788px 872px #FFF , 1697px 448px #FFF , 722px 1142px #FFF , 1840px 1462px #FFF , 413px 683px #FFF , 335px 250px #FFF , 340px 1869px #FFF , 403px 1659px #FFF , 495px 468px #FFF , 1647px 156px #FFF , 783px 594px #FFF , 290px 221px #FFF , 1304px 1035px #FFF , 642px 1073px #FFF , 1812px 619px #FFF , 238px 900px #FFF , 825px 680px #FFF , 1802px 1182px #FFF , 1054px 199px #FFF , 1140px 160px #FFF , 305px 1755px #FFF , 1963px 748px #FFF , 691px 192px #FFF , 940px 113px #FFF , 236px 44px #FFF , 439px 390px #FFF , 1293px 1402px #FFF , 228px 151px #FFF , 1022px 773px #FFF , 822px 1245px #FFF , 1591px 173px #FFF , 705px 1307px #FFF , 595px 1779px #FFF , 1474px 116px #FFF , 978px 690px #FFF , 230px 1474px #FFF , 1326px 229px #FFF , 1989px 860px #FFF , 1978px 536px #FFF , 1417px 1742px #FFF , 1929px 1914px #FFF , 285px 704px #FFF , 625px 945px #FFF , 1588px 1337px #FFF , 36px 1851px #FFF , 98px 843px #FFF , 1138px 995px #FFF , 1568px 1183px #FFF , 1935px 1297px #FFF , 908px 1586px #FFF , 64px 1182px #FFF , 886px 212px #FFF , 741px 1197px #FFF , 1886px 264px #FFF , 1202px 1926px #FFF , 589px 908px #FFF , 474px 1652px #FFF , 989px 731px #FFF , 1261px 1536px #FFF , 1656px 1133px #FFF , 611px 1597px #FFF , 1703px 1904px #FFF , 996px 1201px #FFF , 1183px 1048px #FFF , 777px 1968px #FFF , 172px 29px #FFF , 272px 1756px #FFF , 1403px 802px #FFF , 1533px 1211px #FFF , 1106px 1800px #FFF , 1322px 1794px #FFF , 1839px 1411px #FFF , 885px 1504px #FFF , 1150px 1123px #FFF , 202px 693px #FFF , 184px 106px #FFF , 778px 270px #FFF , 1902px 623px #FFF , 1844px 1445px #FFF , 857px 138px #FFF , 413px 1237px #FFF , 73px 1526px #FFF , 432px 1786px #FFF , 355px 1293px #FFF , 766px 1003px #FFF , 1573px 1977px #FFF , 834px 417px #FFF , 126px 1290px #FFF , 276px 254px #FFF , 170px 1931px #FFF , 158px 754px #FFF , 326px 1698px #FFF , 228px 714px #FFF , 924px 813px #FFF , 851px 1357px #FFF , 1816px 686px #FFF , 396px 967px #FFF , 540px 136px #FFF , 1598px 1738px #FFF , 282px 717px #FFF , 1985px 1776px #FFF , 1208px 761px #FFF , 1249px 1436px #FFF , 667px 1797px #FFF , 1563px 698px #FFF , 1158px 1859px #FFF , 242px 212px #FFF , 445px 1286px #FFF , 1943px 950px #FFF , 268px 819px #FFF , 729px 1755px #FFF;
}

Fonte

O próximo passo é exibir a fonte inicial da abertura, aquela que diz “A long time ago in a galaxy far, far away…”.

Este é também um passo bastante simples, basta adicionarmos uma cor azul e uma fonte um pouco mais parecida com a do filme. Vamos de Arial mesmo

1
2
3
4
.blue-font {
  color: #24b9dd;
  font-family: Arial;
}

Logo após esse texto vemos a logo do filme diminuindo de tamanho e sumindo no espaço.

Essa animação é bastante simples de ser feita. Para isso, basta termos uma imagem em tela e adicionar uma animação para diminuirmos o tamanho dela ao longo de 5 segundos.

Veja no código abaixo como fazemos isso:

Star Wars logo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.fade {
  animation-name: fadeout;
  animation-duration: 10s;
  animation-fill-mode: forwards;
}

@keyframes fadeout {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

Texto com perspectiva

Por fim, finalizamos com o nosso texto amarelo.

Por incrível que pareça, conseguimos aplicar uma perpectiva em elementos utilizando apenas CSS.

Para isso, utilizamos o propriedade `transform`, com um valor de perspectiva e uma rotação no eixo X. É importante notar que a perspectiva é aplicada apenas para os elementos filhos de quem estiver com essa propriedade. 

1
2
3
4
5
.perspective {
  color: #fed34f !important;
  transform: perspective(300px) rotateX(25deg);
  text-align: justify;
}

Conclusão

Um efeito que a alguns anos atrás era um efeito de câmera inovador, hoje pode ser feito utilizando as mais simples linguagens da WEB.

Mais uma vez o CSS nos mostra o quando essa tecnologia é poderosa e, quando explorada, capaz de possibilitar coisas incríveis como essa.

Post Anterior
Post Seguinte