02/14/16 | Mys2010 on Codepen

Profile Card

Memasang kode Css3 Card Design
Untuk menerapkan kode tersebut Langkah awal
Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut ini
Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

body {
  margin: 0 auto;
  padding: 0;
  background: #222;
}

.left {
  left: 25px;
}

.right {
  right: 25px;
}

.center {
  text-align: center;
}

.bottom {
  position: absolute;
  bottom: 25px;
}

#gradient {
  background: #999955;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.2, #DAB046), color-stop(0.2, #D73B25), color-stop(0.4, #D73B25), color-stop(0.4, #C71B25), color-stop(0.6, #C71B25), color-stop(0.6, #961A39), color-stop(0.8, #961A39), color-stop(0.8, #601035));
  background-image: -webkit-linear-gradient(#CCC 20%, #CCC 20%, #CCC 40%, #CCC 40%, #CCC 60%, #961A39 60%, #CCC 80%, #CCC 80%);
  background-image: -moz-linear-gradient(#DAB046 20%, #D73B25 20%, #D73B25 40%, #C71B25 40%, #C71B25 60%, #961A39 60%, #961A39 80%, #601035 80%);
  background-image: -o-linear-gradient(#DAB046 20%, #D73B25 20%, #D73B25 40%, #C71B25 40%, #C71B25 60%, #961A39 60%, #961A39 80%, #601035 80%);
  background-image: linear-gradient(#CCC 20%, #333 20%, #333 40%, #CCC 40%, #CCC 60%, #333 60%, #333 80%, #CCC 80%);
  margin: 0 auto;
  margin-top: 100px;
  width: 100%;
  height: 150px;
}

#gradient:after {
  content: "";
  position: absolute;
  background: #E9E2D0;
  left: 50%;
  margin-top: -67.5px;
  margin-left: -270px;
  padding-left: 20px;
  border-radius: 5px;
  width: 520px;
  height: 275px;
  z-index: -1;
}

#card {
  position: absolute;
  width: 450px;
  height: 225px;
  padding: 25px;
  padding-top: 0;
  padding-bottom: 0;
  left: 50%;
  top: 67.5px;
  margin-left: -250px;
  background: #E9E2D0;
  box-shadow: 0 0 5px black;
  box-shadow: -20px 0 35px -25px black, 20px 0 35px -25px black;
  z-index: 5;
}

#card img {
  width:125px;
  height:125px;
  float: left;
  border-radius: 0px;
  margin-right: 20px;
  -webkit-filter: sepia(1);
  -moz-filter: sepia(1);
  filter: sepia(1);
  border:solid 2px #ccc;
}

#card h2 {
  font-family: courier;
  color: #333;
  margin: 0 auto;
  padding: 0;
  font-size: 15pt;
}

#card p {
  font-family: courier;
  color: #555;
  font-size: 12px;
}

#card span {
  font-family: courier;
}

<div id="gradient"></div>
<div id="card">
  <img src="https://Link Gambar.jpg"/>
  <h2>Your Text..</h2>
  <p> Your Text.</p> 
  <p> Your Text.</p>
  <p> Your Text. ;)</p>
  <span class="left bottom">tel: 530 283 ****</span>
  <span class="right bottom">Your Text</span>
</div>

Penjelasan :
Edit code warna tambahkan teks serta link gambar sesuai kinginan

Edited by. Myscript2010
Sources by. Nuri Özdoğan on Codepen

DEMOSHOW

Category: Profile Card

Css3 Card Design

0 Comment

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

html {
  font-family: 'Arial';
  background: url('http://Link Gambar.png');
}a {
  color: #c20;
  text-decoration: underline;
}
.centered {
  margin: 0 auto;
}
.finer-print {
  font-size: 15px;
}
.span2 {
  width: 40%;
  padding: 0;float: left;
}
.business-card {
  position: relative;
  background: #eeeeec;
  color: #2e3436;
  width: 400px;
  height: 240px;
  font-size: 20px;
  border-bottom: 2px solid #d3d7df;
  border-radius: 15px;
  box-shadow: 0 0 10px 1px #000;
  margin-top: 5%;
}.business-card .title {
  background: #c00;
  color: #fff;
  height: 30px;
  padding: 10px;
  font-weight: bold;
  font-size: 25px;
  border-top: 2px solid #ef2929;
  border-left: 2px solid #ef2929;
  border-radius: 14px 14px 0 0;
}.business-card .content {
  font-weight: bold;
  padding: 15px;
}.business-card .avatar {
  float: right;
  max-width: 100px;
  max-height: 100px;
  box-shadow: 0 0 10px 1px #777;
  border-radius: 3px;
}.business-card .footer {
  position: absolute;
  bottom: 10px;
  left: 2%;
  font-size: 15px;
  padding-top: 5px;
  border-top: 1px solid;
  width: 96%;
}

<div class="business-card centered">
  <div class="title">
   Your Text  </div>
  <div class="content span2">
   Your Text<br />
    <span class="finer-print">Your Text<br />    
    </span>
  </div>
  <div class="content span2">
    <img src="http://Link Gambar.png" alt="avatar" class="avatar" />
  </div>
  <div class="footer">
    &copy; 2013 <a href="http://Link Title">Top Page Design</a>
  </div>
</div>

Penjelasan :
Edit code warna tambahkan teks serta link gambar sesuai kinginan

Edited by. Myscript2010
Sources by. Mark Fischer, Jr on Codepen

DEMOSHOW

Category: Css3 Card Design

CSS flat folded corner

Memasang kode Card UI Design Untuk menerapkan kode tersebut Langkah awal
Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

@import url(http://fonts.googleapis.com/css?family=Rosario:400,700); 

body{
  background: grey;
}

.folded_corner{
  position:relative;
  width:210px;
  margin:4vh auto;
  padding:40px;
  color:#fff;
  font: 20px'Rosario', sans-serif;
  background: #58a;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
    linear-gradient(-135deg, transparent 1.5em, #58a 0);
  
  -webkit-filter: drop-shadow(20px 30px rgba(0,0,0,0.1));
  filter: drop-shadow(20px 30px rgba(0,0,0,0.1));
}
.folded_corner::before{
  content: ' ';
  position:absolute;
  top:2em; 
  right:0;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,0.1) 0) 100% 0 no-repeat;
  width: 2em;
  height:2em;
  transform: rotate(180deg)
}

<div class="folded_corner">
  <p>Your Text or Link Image.</p>
</div>

/* inspired by:
  CSS secret 19: play.csssecrets.io/folded-corner 
  &
  CSS secret 16: play.sccsecrets.io/drop-shadow  
  
*/

Penjelasan :
Edit code warna tambahkan teks atau gunakan link gambar sesuai kinginan

Edited by. Myscript2010
Sources by. Sandra Robotos on Codepen

DEMOSHOW

Category: CSS flat folded corner

Mys2010 on Codepen

Profile Card

Css3 Card Design

CSS flat folded corner

POPULAR

Blog Archive