WEB 2.0 CSS3 - . . , . CSS, , , .
, , , , . – , . , , .
CSS – . . – text-stroke, – text-shadow. , , .
text-stroke
Text-stroke – . Adobe. CSS , - . , . , rem.
. , HEX, RGB - . , :
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
body{
background: rgb(247, 247,24);
display: flex;
justify-content: center;
align-items: center;
}
h1{
color: #bbb;
font: 4rem normal Helvetica, sans-serif;
-webkit-text-stroke: 4px #333;
text-stroke: 4px #333;
}
</style>
</head>
<body>
<h1> - !</h1>
</body>
</html>
html Google Firefox.
Explorer, . . W3W .
:
-webkit-text-stroke: 2rem yellow;
text-stroke: 2 rem yellow;
Mozilla, Opera Explorer 2018 . CSS . text-stroke , . - .
text-shadow
text-shadow . , , text-shadow text-stroke. CSS- , , text-shadow.
:
HTML- :
.h1{
text-shadow: 0px 2px 2px rgba(15, 86, 61,.2);
}
, , , . , .
h1{
text-shadow: 6px 5px 0px rgba(0,0,0,.2);
}
, CSS- text-shadow , , . 3D, . , :
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
body{
background: rgba(0, 105, 255, 1);
display: flex;
justify-content: center;
align-items: center;
}
h1{
color: #FFF;
font: bold 4rem Arial, sans-serif;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
</style>
</head>
<body>
<h1>TEXT WITH 3D</h1>
</body>
</html>
. . , text-shadow , , Explorer.