Skip to main content
Topic: CSS Text Portrait (Read 217 times) previous topic - next topic

CSS Text Portrait





https://weboas.is/paste/sEQZTWhJfQ

https://www.dafont.com/hackerchaos.font

Code: [Select]
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>


<style>
@font-face {
    font-family: hackerchaos;
    src: url("hackerchaos.otf") format("opentype");
}

p {
   background: url('ayylmao.jpg');
   background-clip: text;
   background-repeat: no-repeat;
   background-size: 50%;
   height: 100%;
   margin-bottom:10px;
   color: rgba(255,255,255, 0.3);
   font-family: 'hackerchaos'
}
</style>

<p repeat="5000"> Hack The Planet!</p>

<script>
$(document).ready(function() {
  $('[repeat]').each(function() {
     var toRepeat = $(this).text();
     var times = parseInt($(this).attr('repeat'));
     var repeated = Array(times+1).join(toRepeat);
     $(this).text(repeated).removeAttr('repeat');
   });
 });
</script>




Re: CSS Text Portrait

Reply #1


Code: [Select]
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>


<style>
@font-face {
    font-family: hackerchaos;
    src: url("hackerchaos.otf") format("opentype");
}

p {
   background: url('photo.png');
   background-clip: text;
   background-repeat: no-repeat;
   background-size: 50%;
   background-position: center;
   height: 100%;
   margin-bottom:10px;
   color: rgba(255,255,255, 0.3);
   font-family: 'hackerchaos'
}
</style>

<p repeat="5000"> Hack The Planet!</p>

<script>
$(document).ready(function() {
  $('[repeat]').each(function() {
     var toRepeat = $(this).text();
     var times = parseInt($(this).attr('repeat'));
     var repeated = Array(times+1).join(toRepeat);
     $(this).text(repeated).removeAttr('repeat');
   });
 });
</script>



Code: [Select]
<p id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam possimus, neque, adipisci aperiam illo accusantium excepturi, maiores aspernatur repudiandae laboriosam expedita? Veritatis aut corporis nesciunt dolorem, incidunt exercitationem ad tempore! Hic cupiditate commodi ratione reiciendis facilis optio aliquam dolor ducimus. Eligendi fugit et, blanditiis provident sed dolore iusto exercitationem, ex dolor rem aspernatur nulla fugiat eos earum, facere doloribus aliquid a vel temporibus quidem maiores nisi molestiae doloremque hic. Repellat iste ad perspiciatis fuga! Cumque quas consequatur eligendi id laborum temporibus sed laudantium illo ex ipsam dolorum adipisci, accusamus mollitia corporis! Porro magnam laborum eius unde voluptatem, recusandae sit, dolorum qui deleniti voluptas voluptatibus tenetur molestiae quos harum ullam? Tempore aliquid minima quis animi eveniet possimus aliquam eius harum quia, quibusdam rem repudiandae molestiae labore praesentium. Necessitatibus, sed maxime. Cupiditate culpa sint dolor perspiciatis, id optio soluta fuga obcaecati suscipit ratione quaerat vitae itaque! Quibusdam possimus et repellat voluptatem culpa optio incidunt quisquam est earum corrupti nostrum amet beatae vel, atque quasi quaerat hic animi enim odit iste voluptas assumenda ab. Eveniet, aperiam consequuntur eos eius consectetur officiis beatae earum quo esse, nam fugiat, mollitia quibusdam quis ad a sapiente consequatur quaerat! Aperiam dolorem laborum harum inventore eos facilis voluptatibus aut distinctio? Aut vel, voluptates laudantium fugiat minima soluta cum libero nobis voluptas, facere facilis eos quasi, asperiores veritatis aliquid. Placeat similique facere ipsum, quaerat facilis, consectetur laudantium eius dolores perferendis fuga blanditiis ab voluptatem aliquid quas tenetur quod praesentium rerum expedita! Quas at mollitia sequi architecto alias possimus saepe placeat sint nemo, cupiditate impedit explicabo officiis tempore, quasi deleniti nostrum est ratione quibusdam assumenda temporibus omnis. Sequi, sapiente esse? Aut nam repudiandae amet eum illum beatae dolorum quos asperiores pariatur nulla incidunt quasi assumenda porro optio excepturi, minima, veritatis quibusdam, dicta accusantium explicabo iusto sapiente nihil maiores accusamus. Optio, consequuntur. Quae fugit ratione fuga sunt, ab iste, soluta pariatur exercitationem possimus, asperiores dolor libero quia minima. Ipsum nobis totam libero. Quidem vel blanditiis recusandae accusamus impedit, iste quo fuga vero enim, illum neque ut provident, distinctio doloribus sit exercitationem dolore ex. Expedita corporis aspernatur perferendis. Accusantium delectus modi ipsum maxime similique animi soluta quo deserunt consequatur? Magni, enim? Quo delectus quaerat sed! Praesentium dolore officia eaque accusamus eum ipsa accusantium in culpa tempora explicabo possimus maxime natus ut quibusdam voluptates iusto labore, numquam blanditiis quasi. Quibusdam nostrum fuga excepturi architecto, saepe omnis delectus inventore accusantium eius eos consequatur officia laudantium dolor aliquam. Rem iste veritatis explicabo odit quibusdam temporibus laborum aliquid itaque. Voluptatibus, quasi. Corporis ab non possimus earum, totam consequuntur! Corrupti, voluptates veniam nobis unde in nostrum architecto ducimus voluptatum minima numquam odio mollitia a iste ad fuga? Quod dolorem officiis, corrupti nulla cumque quas? Minus debitis ut dignissimos autem dolor necessitatibus unde, ducimus, explicabo veritatis totam reiciendis pariatur nesciunt quasi accusamus eveniet magni neque obcaecati inventore consequatur quibusdam quia? Atque fugiat doloribus veniam eius aut recusandae beatae aspernatur quasi corporis quas animi a totam deserunt, quisquam vitae quam dicta labore, sed optio nobis cum exercitationem pariatur. Deleniti doloribus provident harum quia repellendus neque eaque, debitis, accusamus alias fugit deserunt culpa asperiores maiores illo quo, sunt vero porro. Consequatur asperiores reprehenderit voluptatem neque inventore dolorum est dignissimos ab voluptates praesentium saepe beatae, perspiciatis velit voluptate ipsam nemo repellendus quos necessitatibus. Nostrum iusto consequatur corporis, accusantium alias cumque, tempore quibusdam voluptatem consectetur maiores ipsum tenetur, provident culpa esse blanditiis eligendi labore nulla nihil? Consequuntur, minus id voluptates similique nam assumenda adipisci vel, eaque a alias libero pariatur voluptatem dicta nihil omnis, ullam iure. Voluptatem iure possimus voluptas! Ipsa delectus nemo expedita quibusdam vel nulla molestiae doloribus culpa ex natus doloremque animi quos voluptate nesciunt, quam impedit dolorem dolor atque voluptatem accusantium veritatis iure cumque non. At quia magnam, mollitia earum aliquam necessitatibus enim corrupti eum cum suscipit. Vero officia cupiditate vel. Dolorum nisi ad et voluptatibus vel corporis culpa sint quidem, dicta dolore illum est suscipit cum saepe! Cupiditate illo, numquam ea illum quasi blanditiis impedit omnis quidem voluptatibus, unde expedita atque nihil, corrupti tempora aperiam doloremque nulla harum asperiores sequi vel est. Possimus vitae quibusdam autem ut, excepturi animi. Perferendis illo deserunt, iusto officia, nemo iure dolorum obcaecati sint nisi ullam adipisci esse exercitationem nesciunt provident explicabo quas, excepturi ex voluptas. Voluptas, nesciunt, eos impedit necessitatibus, odio iste quo architecto neque rerum excepturi consequatur dolor nisi labore sunt optio repudiandae corporis. Necessitatibus, cum facilis aperiam labore reiciendis, debitis molestiae, repellat dolorum veniam ipsam perferendis quibusdam nobis ipsum dignissimos! Ratione alias beatae similique rerum totam atque dolorum dolores doloremque unde velit distinctio quod tenetur possimus, officia saepe natus. Illo officia esse sed unde minus, minima, explicabo rem officiis eum nulla quo? Sint sed corrupti ut totam excepturi! Eveniet ut explicabo a odio incidunt? Sint ratione impedit exercitationem nam repudiandae perspiciatis odit alias ex cupiditate quibusdam omnis eius iure consequuntur officia, possimus ullam rem hic amet dolores praesentium excepturi doloribus eos tempora. Asperiores at temporibus molestias, ipsa dicta repellat facere inventore atque tempore impedit? Fugiat in alias eum beatae eos, quisquam molestiae repellendus veniam iure quis debitis totam ad nulla magni consequatur adipisci maxime dignissimos officiis voluptates corrupti veritatis voluptatum. Odio, amet. Repellendus, veritatis qui magni perspiciatis, tenetur consectetur cum praesentium vero sit, quod dicta ex. Odit explicabo nobis nostrum ad, dolores voluptas mollitia asperiores earum magni sint doloribus, vel tempore voluptatum corrupti, totam aspernatur debitis aliquid non. Temporibus, eligendi. Enim modi id doloribus deleniti laborum iusto accusamus, ipsa doloremque maxime quod animi delectus, consectetur mollitia incidunt, sed commodi expedita magnam ad quisquam fuga fugiat cupiditate nam facere cumque. Qui laborum saepe molestias. Amet porro necessitatibus, neque minima corporis mollitia ab non accusamus nobis illo ea sequi? Quibusdam deleniti delectus, iste perferendis dignissimos ratione mollitia perspiciatis optio error tempora quo? Fugiat molestiae expedita similique aut ea eligendi doloremque fugit, accusamus ab amet culpa voluptate velit reiciendis quia recusandae ducimus deserunt inventore, laboriosam adipisci tempore soluta saepe, blanditiis possimus dolor. Sint nam animi nobis reiciendis ex labore earum recusandae, doloremque consequuntur quidem pariatur maxime, optio ut alias molestias? Quia, ipsum quos!</p>




<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

p {
  font-family: 'Poppins', sans-serif;
  line-height: 14px;
  background: url("photo.png");
  -webkit-background-clip: text;
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
  background-size: 70vh;
  background-position: center;
}

body {
  background: black;
  overflow: hidden;
}
</style>