Hot File

Create Picture IPhone 6 With CSS3

View: 332    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: HTML-CSS template   Fields: Other

0 point/1 review File has been tested

Realizing the iPhone 6 is causing fever for young people, especially young people in Vietnam. Today Laptrinhweb would share for you the simple css, you can help shape the iPhone 6 on your website or blog with a few simple steps.

Introduction

Realizing the iPhone 6 is causing fever for young people, especially young people in Vietnam. Today Laptrinhweb would share for you the simple css, you can help shape the iPhone 6 on your website or blog with a few simple steps.

HTML

First, we need a standardized framework html as follows:

<div class="container">
  <div class="phone">
    <div class="camera"></div>
    <div class="speaker"></div>
    <div class="sleep-button"></div>
    <div class="silent-switch"></div>
    <div class="volume up"></div>
    <div class="volume down"></div>
    <div class="screen">
 
     </div>
    <div class="home-button"></div>
  </div>
</div>

CSS

To shape your iPhone using paragraph 6 the following css:

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #85aed6;
}
 
.container{
  max-width: 600px;
  margin: 50px auto;
}
 
.phone{
  position: relative;
  background: #1e1e1e;
  height: 500px;
  width: 250px;
  border-radius: 25px;
  margin: 0 auto;
}
 
.camera{
  position: absolute;
  background: #7A7A7A;
  height: 8px;
  width: 8px;
  border-radius: 15px;
  top: 22px;
  left: 85px;
}
 
.speaker{
  position: absolute;
  background: #7A7A7A;
  height: 6px;
  width: 50px;
  border-radius: 15px;
  top: 22px;
  left: 105px;
}
 
.sleep-button{
  position: absolute;
  background: #1e1e1e;
  height: 35px;
  width: 3px;
  border-top-right-radius: 3px 3px;
  border-bottom-right-radius: 3px 3px;
  top: 105px;
  left: 250px;
}
 
.silent-switch{
  position: absolute;
  background: #1e1e1e;
  height: 25px;
  width: 3px;
  border-top-left-radius: 3px 3px;
  border-bottom-left-radius: 3px 3px;
  top: 60px;
  left: -3px;
}
 
.volume{
  position: absolute;
  background: #1e1e1e;
  width: 3px;
  height: 35px;
  border-top-left-radius: 3px 3px;
  border-bottom-left-radius: 3px 3px;
  left: -3px;
}
 
.up{
  top: 105px;
}
 
.down{
  top: 145px;
}
 
.screen{
  position: absolute;
  overflow: hidden;
  background: #fff;
  height: 390px;
  width: 230px;
  top: 50px;
  left: 10px;
  background: url("http://upload.wikimedia.org/wikipedia/commons/a/a3/IOS_8_Lockscreen.PNG") no-repeat center top;
    background-size: cover;
}
 
.home-button{
  position: absolute;
  border: 1px solid #7A7A7A;
  height: 35px;
  width: 35px;
  border-radius: 25px;
  bottom: 12px;
  left: 50%;
  margin-left: -18px;
}

Article is simple and understandable, reference is also good for you to better understand the CSS3. I hope through this article, you will be able to learn lots of new things.

Good luck !

 

Create Picture IPhone 6 With CSS3

Create Picture IPhone 6 With CSS3 Posted on 17-12-2015  Realizing the iPhone 6 is causing fever for young people, especially young people in Vietnam. Today Laptrinhweb would share for you the simple css, you can help shape the iPhone 6 on your website or blog with a few simple steps. 5/10 332

Comment:

To comment you must be logged in members.

Files with category

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd