CSS Basics Tutorial: CSS Graphics mix, image signature, multi-image stitching and image effects examples

This article introduces the basic CSS Tutorial: CSS Graphics and text mix, image signature, multi-image stitching and image effects examples

Learning CSS layout Positioning and floating, we can easily make a lot of typesetting and content stitching. To do a few simple examples today to show the popular p+css layout of the convenient and easy to learn the CSS layout of positioning and floating, we can simply make a lot of typesetting and content splicing. Do a few simple examples today to demonstrate the ease of use of the popular p+css layout. And by the way, CSS3 new style properties Box-shadow and property transform.

A picture-and-text mixed row

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 






：



Two-image signature

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">    






：



Three multi-figure stitching

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 



：


Four image effects

Before we make this example, we will briefly introduce the new style properties of CSS3: Box-shadow (Border Shadow) and transform (rotation effect). When learning CSS, I learned a lot of the style attributes of the box model, and the combination would make a good effect.

Take a look at it in detail: Cssbo
. Shadow Properties and Csstransform genera
. () Border Shadow properties: Box-shad
To set the shadow of an element, you can actually add a shadow without a border.
. Language regulations
. box-shadow:apbpcp#xxxxx
. Box-shadow:apbpcprgb (,,,.
. APX represents a horizontal movement; Bpx represents a vertical movement; CPX represents the blur distance of the shadow; The last face is the color
. () Rotation effect properties: TRANSFO
. Sets the rotation of the element, applying a D or D transformation to the element. This property allows us to rotate, scale, move, or tilt the elements
The. Transform:rotate (angle Unit is deg) defines the D-rotation as specified in the parameters, and the angle represents the angle

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 

：