Shulou(Shulou.com)06/03 Report--

In this issue, Xiaobian will bring you about how to understand CSS image mixing and image signature and multi-image stitching and image effects. The article is rich in content and analyzed and described from a professional perspective. After reading this article, I hope you can gain something.

Having learned CSS layout positioning and floating, we can easily make a lot of typography and content stitching. Today I'm going to show you a few simple examples of how the popular DIV+CSS layout works. Also note the box-shadow and transform properties added to CSS3.

mixed arrangement of pictures and texts

CSS layout of mixed graphics

#test {

border:#FF00FF solid 2px;

width:650px;

height:460px;

background-color:#CCCCCC;

margin:auto;

}

#img {

padding-top:3px;

float:left;

}

img {

width:300px;

height:350px;

}

#text {

color:#0000FF;

font-size:18px;

font-family:"Microsoft Elegant Black";

}

Gao Yuanyuan, a Chinese actress, was born in Yungang, Fengtai District, Beijing City on October 5, 1979, an ordinary intellectual family. In 1996, Gao Yuanyuan was discovered by advertising agencies and subsequently shot a large number of advertisements, becoming a model in the advertising circle. In 1997, Gao Yuanyuan starred in her first film, Love Mala Tang, and began her acting career. In 2001, Gao Yuanyuan won the Silver Bear Award for Best Film at the Berlin International Film Festival for her film Bicycle at Seventeen. In 2003, Gao Yuanyuan tried ancient martial arts drama for the first time, playing Zhou Zhiruo, the leader of Emei Sect, in the TV series Yitian Dragon Slaying Story. In 2005, the film "Green Red" won the Jury Prize of Cannes International Film Festival, and in the same year became the first Miss Lily of China at the Dutch International Bulbous Flower Center. From 2008 to 2009, the film Nanjing! Nanjing!, The film won the Golden Shell Award for Best Film at the San Sebastian International Film Festival. In 2011, she was nominated for Best Actress at the Hong Kong Film Awards for her film Single Men and Women. In 2012, he starred in the film Search directed by Chen Kaige. In 2013, Gao Yuanyuan starred in the TV series "Let's Get Married" broadcast in CCTV and Hunan Satellite TV prime time. In 2014, the love movie "Lifetime" broke through 200 million yuan at the box office. The film "Gentleman's Road" has been scheduled for the National Day of 2015.

Effect drawing:

Two image signatures

CSS Layout Image Signature

#test {

border:#FF00FF solid 2px;

width:720px;

position:absolute;/* Keep text from falling out of the picture */

top:50px;

}

img {

width:720px;

height:480px;

}

#text {

color:#0000FF;

font-size:24px;

font-family:"Chinese official script";

position:absolute;

bottom:50px;

right:50px;

}

National Goddess---Gao Yuanyuan

Effect drawing:

Triple-multiple graph splicing

CSS layout of image mosaic

#box {

margin:auto;

height:600px;

width:690px;

}

.test {

height:300px;

width:690px;

}

.img {

height:300px;

width:230px;

float:left;

}

img {

height:300px;

width:230px;

}

Effect drawing:

Four picture effects

Before we do this example, let's briefly introduce the new style attributes in CSS3: box-shadow and transform. When learning CSS, I learned a lot of style attributes of box model, and it will make a good effect when combined.

Take a closer look: CSSBo

.shadow attribute and CSStranform genus

. () Border Shadow Attribute: box-shad

. Set the shadow of the element, in fact, there is no border can also add shadow

. language code

.box-shadow:apbpcp#xxxxx

.box-shadow:apbpcprgb(,,,.

.apx for horizontal movement;bpx for vertical movement;cpx for blur distance of shadow; last color

. () Rotation Effect Attribute: transfo

. Sets the rotation of an element, applying a D or D transformation to the element. This property allows us to rotate, scale, move, or tilt the element

.transform:rotate(angle in deg) Define D RotationSpecify angle in parameter,angle indicates angle

CSS Layout with Image Effects

body {

margin:30px;

background-color:#CCCCCC;

}

div.polaroid {

width:294px;

padding:10px;

margin:10px;

border:1px solid #BFBFBF;

background-color:#FFFFFF;

box-shadow:10px 10px 10px #99999;/* settings for image shadow */

}

div.rotate_left {

float:left;

transform:rotate(8deg);/* image tilted to right */

}

div.rotate_right {

float:left;

transform:rotate(-8deg);/* image tilted to left */

}

Tulips in Shanghai Flower Harbor, flower name: Ballade Dream.

China Pavilion, Shanghai World Expo 2010.

Effect drawing:

The above is how to understand CSS image mixing and image signature and multi-image stitching and image special effects shared by Xiaobian. If there are similar doubts, please refer to the above analysis for understanding. If you want to know more about it, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.