国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Table of Contents
Effect 1-3D text effect
Effect 2-long tail effect
Effect 3-Inner Shadow
Effect 4-twill stroke effect
Effect Five - Text Stripe Animation
Effect Six - Stroke Text
Effect 7 - Mask text
Effect eight-3D glare effect
Home Web Front-end HTML Tutorial Pure CSS3 text effect recommendation_html/css_WEB-ITnose

Pure CSS3 text effect recommendation_html/css_WEB-ITnose

Jun 24, 2016 pm 12:05 PM
css3 recommend text effect

I have studied several text effects implemented in pure CSS before, such as "CSS Text Stripe Shadow Animation" and "Responsive Cream Three-dimensional Character Effect". Today we will study several text effects, mainly using text- Several unique features of shadow and webkit kernels achieve effects.

Click here to study online and click here to download collections.

Effect 1-3D text effect


Our html file looks like this. In order to better display the effect, we have added editable attributes.

<div contenteditable="true" class="text effect01">前端開發(fā)whqet</div>
In the css file, we first look at the global settings

body{  background-color: #666;}@import url(http://fonts.googleapis.com/css?family=Dosis:500,800);.text {    font-family:"微軟雅黑", "Dosis", sans-serif;    font-size: 80px;    text-align: center;    font-weight: bold;    line-height:200px;    text-transform:uppercase;    position: relative;}
Then there is the exclusive CSS for effect one, which is very simple. Just use text-shadow to achieve the three-dimensional character effect

.effect01{    background-color: #333;    color:#fefefe;    text-shadow:    0px 1px 0px #c0c0c0,    0px 2px 0px #b0b0b0,    0px 3px 0px #a0a0a0,    0px 4px 0px #909090,    0px 5px 10px rgba(0, 0, 0, 0.6);}

Effect 2-long tail effect


html file Still the same

<div contenteditable="true" class="text effect02">前端開發(fā)whqet</div>
The text-shadow is offset a little more, the color becomes simpler, and the long tail effect comes.

.effect02{  color:#333;  background-color: #ddd;  text-shadow:    1px -1px 0 #767676,     -1px 2px 1px #737272,     -2px 4px 1px #767474,     -3px 6px 1px #787777,     -4px 8px 1px #7b7a7a,     -5px 10px 1px #7f7d7d,     -6px 12px 1px #828181,     -7px 14px 1px #868585,     -8px 16px 1px #8b8a89,     -9px 18px 1px #8f8e8d,     -10px 20px 1px #949392,     -11px 22px 1px #999897,     -12px 24px 1px #9e9c9c,     -13px 26px 1px #a3a1a1,     -14px 28px 1px #a8a6a6,     -15px 30px 1px #adabab,     -16px 32px 1px #b2b1b0,     -17px 34px 1px #b7b6b5,    -18px 36px 1px #bcbbba,     -19px 38px 1px #c1bfbf,     -20px 40px 1px #c6c4c4,     -21px 42px 1px #cbc9c8,     -22px 44px 1px #cfcdcd;}

Effect 3-Inner Shadow


html file

<div contenteditable="true" class="text effect03">前端開發(fā)whqet</div>
css file

.effect03{  color: #202020;  background-color: #2d2d2d;  text-shadow:     -1px -1px 1px #111111,    2px 2px 1px #363636;}

Effect 4-twill stroke effect


html file

<div contenteditable="true" class="text effect04">前端開發(fā)whqet</div>
css file, use linear-gradient to set striped background for div, only in Implementation of displaying background on text (-webkit-background-clip: text;), transparent text color (-webkit-text-fill-color: transparent;) and text stroke (-webkit-text-stroke: 2px #111;) .

.effect04{  background-color: #333;  background-image:      linear-gradient(        45deg,        transparent 45%,        hsla(48,20%,90%,1) 45%,        hsla(48,20%,90%,1) 55%,        transparent 0        );    background-size: .05em .05em;  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  -webkit-text-stroke: 2px #111;}

Effect Five - Text Stripe Animation


html file

<div data-text="前端開發(fā)whqet" class="text effect05">前端開發(fā)whqet</div>
css file, using :before pseudo-object Displays and animates stripes.

.effect05{    color:#DC554F;    background-color:#27ae60;    z-index: 3;}.effect05:before{    content:attr(data-text);      width:100%;    line-height:200px;    opacity: .5;    position: absolute;    top:2px;    left:5px;    background-image:        linear-gradient(          45deg,          transparent 45%,          hsla(48,20%,90%,1) 45%,          hsla(48,20%,90%,1) 55%,          transparent 0          );     z-index:-1;    background-size: .05em .05em;      -webkit-background-clip: text;    -webkit-text-fill-color: transparent;     animation: shadowGo 20s linear infinite; }@keyframes shadowGo{       0% {background-position: 0 0}      0% {background-position: -100% 100%}}; 

Effect Six - Stroke Text


html file

<div contenteditable="true" class="text effect06">前端開發(fā)whqet</div>
css file

.effect06 {    -webkit-text-fill-color: transparent;    -webkit-text-stroke: 2px #d6d6d6;    background: url(http://www.pencilscoop.com/demos/CSS_Text_Effects/images/galaxy.jpg);    background-size: cover;}

Effect 7 - Mask text


html file

<div contenteditable="true" class="text effect07">前端開發(fā)whqet</div>
css file

.effect07 {    background: url(http://www.pencilscoop.com/demos/CSS_Text_Effects/images/galaxy.jpg) #333;    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    background-size: cover;    animation: 10s infinite linear animate;}.effect07:before {    content:"";    width:100%;    height:100%;    position: absolute;    left:0;    top:0;    background-color: #999;    z-index: -1;}@keyframes animate {    0% {        background-position:0;    }    100% {        background-position:-1000px 0;    }}

Effect eight-3D glare effect


html file

<div class="text effect08">  <h1>前端開發(fā)whqet</h1>  <h1>前端開發(fā)whqet</h1>  <h1>前端開發(fā)whqet</h1>  <h1>前端開發(fā)whqet</h1>  <h1>前端開發(fā)whqet</h1>  <h1>前端開發(fā)whqet</h1>  <h1>前端開發(fā)whqet</h1>  <h1>前端開發(fā)whqet</h1></div>
css file

.effect08 {    color:#fff;    transform-origin:center bottom;    transform-style:preserve-3d;    transition:all 1s;    cursor: pointer;}.effect08:hover {    transform:rotate3d(1, 0, 0, 40deg);}.effect08 h1 {    position: absolute;    left:0;    right:0;    margin:auto;    text-shadow:0 0 10px rgba(0, 0, 100, .5);}@for $n from 1 to 8 {    .effect08 h1:nth-child(#{$n}) {        transform:translateZ(4px*$n);    }}

That's it.

--------------------------------------------- --------------------------

Front-end development whqet, pay attention to web front-end development and share related resources.
-------------------------------------------------- ------------------

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

The first choice for CS players: recommended computer configuration The first choice for CS players: recommended computer configuration Jan 02, 2024 pm 04:26 PM

1. Processor When choosing a computer configuration, the processor is one of the most important components. For playing games like CS, the performance of the processor directly affects the smoothness and response speed of the game. It is recommended to choose Intel Core i5 or i7 series processors because they have powerful multi-core processing capabilities and high frequencies, and can easily cope with the high requirements of CS. 2. Graphics card Graphics card is one of the important factors in game performance. For shooting games such as CS, the performance of the graphics card directly affects the clarity and smoothness of the game screen. It is recommended to choose NVIDIA GeForce GTX series or AMD Radeon RX series graphics cards. They have excellent graphics processing capabilities and high frame rate output, and can provide a better gaming experience. 3. Memory power

How to recommend friends to me on Taobao How to recommend friends to me on Taobao Feb 29, 2024 pm 07:07 PM

In the process of using Taobao, we will often be recommended by some friends we may know. Here is an introduction to how to turn off this function. Friends who are interested should take a look. After opening the "Taobao" APP on your mobile phone, click "My Taobao" in the lower right corner of the page to enter the personal center page, and then click the "Settings" function in the upper right corner to enter the settings page. 2. After coming to the settings page, find "Privacy" and click on this item to enter. 3. There is a "Recommend friends to me" on the privacy page. When it shows that the current status is "on", click on it to close it. 4. Finally, in the pop-up window, there will be a switch button behind "Recommend friends to me". Click on it to set the button to gray.

Glodon Software's computer configuration recommendations; Glodon Software's computer configuration requirements Glodon Software's computer configuration recommendations; Glodon Software's computer configuration requirements Jan 01, 2024 pm 12:52 PM

Glodon Software is a software company focusing on the field of building informatization. Its products are widely used in all aspects of architectural design, construction, and operation. Due to the complex functions and large data volume of Glodon software, it requires high computer configuration. This article will elaborate on the computer configuration recommendations of Glodon Software from many aspects to help readers choose a suitable computer configuration processor. Glodon Software requires a large amount of data calculation and processing when performing architectural design, simulation and other operations. Therefore, the requirements for the processor are higher. It is recommended to choose a multi-core, high-frequency processor, such as Intel i7 series or AMD Ryzen series. These processors have strong computing power and multi-thread processing capabilities, and can better meet the needs of Glodon software. Memory Memory is affecting computing

Recommended 2022 NVIDIA 40 series graphics card driver version Recommended 2022 NVIDIA 40 series graphics card driver version Jan 02, 2024 pm 06:43 PM

NVIDIA 4060 graphics card driver version recommended. When choosing a graphics card driver version on a laptop, it is generally recommended to choose the version recommended by the official website or the latest version. For the Intel HD Graphics 4060 graphics card, it is recommended to choose the latest driver released on Intel's official website for update and installation. The specific steps are as follows: "Words Play Flowers" is a popular word puzzle game with new levels launched every day. One of the levels is called Nostalgic Cleaning. We need to find 12 elements in the picture that are inconsistent with the era. Today, I will bring you a guide to clearing the nostalgic cleansing level of "Word Play Flowers" to help players who have not passed it successfully pass the level. Let’s take a look at the specific steps! VisitIntel

Essential for Java development: Recommend the most efficient decompilation tool Essential for Java development: Recommend the most efficient decompilation tool Jan 09, 2024 pm 07:34 PM

Essential for Java developers: Recommend the best decompilation tool, specific code examples are required Introduction: During the Java development process, we often encounter situations where we need to decompile existing Java classes. Decompilation can help us understand and learn other people's code, or make repairs and optimizations. This article will recommend several of the best Java decompilation tools and provide some specific code examples to help readers better learn and use these tools. 1. JD-GUIJD-GUI is a very popular open source

Become a C expert: Five must-have compilers recommended Become a C expert: Five must-have compilers recommended Feb 19, 2024 pm 01:03 PM

From Beginner to Expert: Five Essential C Compiler Recommendations With the development of computer science, more and more people are interested in programming languages. As a high-level language widely used in system-level programming, C language has always been loved by programmers. In order to write efficient and stable code, it is important to choose a C language compiler that suits you. This article will introduce five essential C language compilers for beginners and experts to choose from. GCCGCC, the GNU compiler collection, is one of the most commonly used C language compilers

Which computer should Geographic Information Science majors choose? Which computer should Geographic Information Science majors choose? Jan 13, 2024 am 08:00 AM

Recommended computers suitable for students majoring in geographic information science 1. Recommendation 2. Students majoring in geographic information science need to process large amounts of geographic data and conduct complex geographic information analysis, so they need a computer with strong performance. A computer with high configuration can provide faster processing speed and larger storage space, and can better meet professional needs. 3. It is recommended to choose a computer equipped with a high-performance processor and large-capacity memory, which can improve the efficiency of data processing and analysis. In addition, choosing a computer with larger storage space and a high-resolution display can better display geographic data and results. In addition, considering that students majoring in geographic information science may need to develop and program geographic information system (GIS) software, choose a computer with better graphics processing support.

Java emulator recommendations: These five are easy to use and practical! Java emulator recommendations: These five are easy to use and practical! Feb 22, 2024 pm 08:42 PM

A Java emulator is software that can run Java applications on a computer or device. It can simulate the Java virtual machine and execute Java bytecode, enabling users to run Java programs on different platforms. Java simulators are widely used in software development, learning and testing. This article will introduce five useful and practical Java emulators that can meet the needs of different users and help users develop and run Java programs more efficiently. The first emulator was Eclipse. Ecl

See all articles