CSS Text Effect with Web Fonts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS TEXT EFFECT PROPERTY </title>
<style>
@font-face {
font-family: Bluemoon;
src: url(Fonts/Bluemoon.otf);
}
@font-face {
font-family: thunderStoneScript;
src: url(Thunder_Stone_Script.otf);
}
h1 {
font-family: thunderStoneScript;
}
p {
font-family:Bluemoon ;
}
.test1 {
width: 200px;
white-space: nowrap;
border: 2px solid black;
overflow: hidden;
text-overflow: clip;
}
.test2 {
width: 200px;
white-space: nowrap;
border: 2px solid black;
overflow: hidden;
/* here text-overflow: ellipses; shows the overflowed text in the form of (...) means the text is going on */
text-overflow: ellipsis;
}
.test1:hover {
white-space: pre-wrap;
overflow: visible;
word-break: keep-all; /*No word breaking*/
}
.test2:hover {
white-space: pre-wrap;
overflow: visible;
word-break: break-all; /* word breaking*/
writing-mode: vertical-lr;
}
p.vertical {
border: 1px solid crimson;
writing-mode: sideways-lr;
float: left;
height: 400px;
word-break: break-all;
}
p.vertical2 {
writing-mode: sideways-rl;
border: 1px solid crimson;
float: left;
height: 400px;
word-break: keep-all;
}
p.vertical3 {
writing-mode: sideways-lr;
border: 1px solid crimson;
float: left;
}
p.vertical4 {
overflow: visible;
writing-mode:sideways-rl;
border: 1px solid crimson;
float: left;
}
.veti-word {
writing-mode: sideways-rl;
}
.verti-word {
writing-mode: vertical-rl; /*Vertical-lr is not working B'coz it maybe the used in earlier version of html but not working in HTML 5 .That's why we will use (sideway) values in our practice.*/
}
</style>
</head>
<body>
<h1> CSS TEXT EFFECT PROPERTY</h1>
<h2>Text overflow with (clip)</h2>
<p class="test1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, <span class="veti-word"> nostrum</span> maxime magnam facere dolore et <span class="verti-word"> laboriosam</span> provident officiis in, autem expedita repellat repellendus saepe voluptates odio deserunt animi vitae! Perferendis? Lorem ipsum dolor sit amet consectetur adipisicing elit. In, tempore.</p>
<br><br>
<h2>Text overflow with (ellipsis)</h2>
<p class="test2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, nostrum maxime magnam facere dolore et laboriosam provident officiis in, autem expedita repellat repellendus saepe voluptates odio deserunt animi vitae! Perferendis?</p>
<h2>Writing Mode</h2>
<p class="vertical">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni, inventore. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit, dolorem?</p>
<p class="vertical2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni, inventore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui, ratione!</p>
<p class="vertical3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni, inventore.</p>
<p class="vertical4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni, inventore.</p>
</body>
</html>
No comments:
Post a Comment