Home > Developer > JavaScript
Use CSS3 to create an optional text, and css3 to create an optional text
The following example shows how to use CSS to create optional texts in HTML5.
Html code
Download source code:
Creating-non-selectable-text-using-css.zip
Currently, mainstream browsers support CSS3 in sequence: Chrome, safari, firefox, opera & IE9, firefox, and even CSS3 selectors are not all supported, while others support it. Apart from Chrome & safari, others have limited support for reflection, flip, and other styles. opera does not even support gradient and transform animations of background colors ). IE6 \ 7 \ 8 should not be too extravagant, even if part of IE8 that supports CSS3 is less than 1/10.
CSS3 is equivalent to a set of style sheet definitions written casually on unsupported browsers: div {haha: huhu;}, which does not affect the page style.
There is nothing to do if it is not supported. For corner, reflection, tilt (rotation), and other definitions in CSS3, it is usually replaced by a background image in an unsupported browser. Animation and other effects can only be implemented using javascript.
How to Use CSS3 to create 3D effects and text to implement style Solutions
Copy the Code as follows :. example-class {text-shadow: [X offset] [Y offset] [Blur size] [Colour];} Note: X indicates the displacement on the X axis and can be a negative value; Y indicates the displacement on the Y axis, which can be a negative value. Blur indicates the projection width, which cannot be a negative value. Color indicates the Projection Color.
Stacked multi-layer CSS projection
Although we do not need to stack multi-layer projection, it will have a better 3D effect through stack multi-layer projection.
Start creating 3D text
You may choose a color that is deeper than the text to use as the projection color, so in this example, I use white text and a little deeper gray as the projection color, in this example, I render the 3D effect of H2 text. The css code is as follows:
The copy code is as follows: h2 {text-shadow:
1px 1px 0 # CCC,
2px 2px 0 # CCC,/* end of 2 level deep gray shadow */
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444;/* end of 4 level deep dark shadow */} the effect is as follows: Well, you have created basic 3D text here. However, let's further implement the zoomed-in effect of text sliding over the mouse, and use the transision attribute of css to implement smooth fade-in and fade-out effects.
First, use the transform attribute to zoom in the font.
Copy the Code as follows: h2: hover {/* CSS3 Transform Effect */
-Webkit-transform: scale (1.2);/* Safari & Chrome */
-Moz-transform: scale (1.2);/* Firefox */
-O-transform: scale (1.2);/* Opera */}: Use the transition attribute to implement fade-in and fade-out.
Copy the Code as follows: h2 {/* CSS3 Transition Effect */
-Webkit-transition: all 0.12 s outgoing-out;/* Safari & Chrome */
-Moz-transition: all 0.12 s outgoing-out;/* Firefox */
-O-transition: all 0.12 s bytes-out;/* Opera */} Here, we use CSS3 to implement the 3D effect text, in addition, moving the mouse over enables font to zoom in and fade in and out, which is implemented with pure CSS.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
