Anda di sini : / / Contoh Kode CSS Untuk Tampilan Responsive

Wednesday, January 7, 2015

Contoh Kode CSS Untuk Tampilan Responsive



Contoh Kode CSS Untuk Tampilan Responsive

/* CSS Global Responsive */
@media screen and (max-width:1066px) {
#outer-wrapper {margin:0 auto;margin-top:50px}
.opt-in .inner .ct-wrapper {padding:0 48px;}
.header-right {float:right;padding:0;overflow:hidden;margin:0;max-width:640px!important;}
.header-right img {display:block;}
#sidebar{display:none}}

@media screen and (max-width:960px) {
.blogouter-wrapper {border-bottom:none;border-top:none;}
#header h1,#header p,#header,.header-right,#header .description{margin:0 auto;width:100%;float:none;text-align:center;}
#header{margin-bottom:10px;}
.header-right{margin-top:0px;}
.header-right img, .header-right iframe{margin:0 auto;max-width:100%;}
#header-wrapper{width:100%!important;padding:0 10px;}
.ct-wrapper{padding:0 10px;}
.header-wrapper2 {padding:0}
.main-nav {display:block;width:100%;padding:0}
.main-nav ul {text-align:center;}
.main-nav ul {display:none;height:auto;}
.main-nav a#pull {background-color:#4b3f57;color:#fff;border:none;display:inline-block;font-family:'Open Sans';font-size:12px;font-weight:bold;padding:10px 3%;height:30px;line-height:30px;position:relative;text-align:left;width:94%;}
.main-nav a#pull:after {content:"";background:url('http://1.bp.blogspot.com/-P2RRijDirXA/U8ftwSomm6I/AAAAAAAAEbo/tLU4c5dk2K4/s1600/nav-icon.png') no-repeat; width:30px;height:30px;line-height:30px;display:inline-block;position:absolute;right:15px;top:15px;}
.main-nav li {display:block;width:100%;text-align:left;border-bottom:none;}
.main-nav li a {background:#4b3f57;color:#fff;padding:15px 20px;display:block;}
.main-nav li a:hover, nav a:active {background:#4b3f57;border:none;color:#fff;}
.main-nav ul li a:hover {background:#f35d5c;color:#fff;}
.main-nav .home1 a {box-shadow:none;background:#4b3f57;color:#fff;}
.main-nav .home1 a:hover {background:#f35d5c;color:#fff;}
#header-wrapper{width:100%!important;padding:0 10px;}
#menu{position:relative;background:#4b3f57;color:#fff;}
#menu ul{background:#3f354a;position:absolute;top:100%;right:0;left:0;z-index:5;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;}
#menu li{display:block;width:100%;text-align:left;}
#menu a{border:none;}
#menu li a{color:#fff;}
#menu li a:hover{background:#f35d5c;color:#fff}
#menu li:hover{background:#f35d5c;color:#fff;}
#menu li:hover > a.ai,#menu a.ai:hover{background:#f35d5c;color:#fff;}
#menu li:hover > a,#menu li a:hover{background:#f35d5c;color:#fff;box-shadow:none;transition: .3s linear;}
#menu ul.menus a{background:#3f354a;color:#fff;border-bottom:none;}
#menu ul.menus a:hover{background:#f35d5c;color:#fff;border;left:none;}
#menu ul.menus li{background:#3f354a;color:#fff;border-bottom:none;}
#menu ul.menus li:hover{background:#f35d5c;color:#fff;border;left:none;}
#menu ul.menus li a{background:#3f354a;color:#fff;border-bottom:none;}
#menu ul.menus li a:hover{background:#f35d5c;color:#fff;border;left:none;}
#menu input,#menu label{display:inline-block;position:absolute;right:0;top:0;}
#menu input:after,#menu label:after {content:"";background:url('http://1.bp.blogspot.com/-P2RRijDirXA/U8ftwSomm6I/AAAAAAAAEbo/tLU4c5dk2K4/s1600/nav-icon.png') no-repeat; width:30px;height:30px;display:inline-block;position:absolute;right:15px;top:17px;}
#menu input{z-index:4}
#menu input:checked + label{color:#fff;font-weight:700}
#menu input:checked ~ ul{display:block}
#menu .homers a{background:transparent;color:#fff;}
#menu .homers a:hover{background:#f35d5c;color:#fff;}
#footer-widgetfix {width:100%;overflow:hidden;}
#menu li:hover > a.ai::after{content:"";width:6px;height:6px;border:2px solid #fff;border-right-width:0;border-top-width:0;transform:rotate(320deg);-webkit-transform:rotate(320deg);-moz-transform:rotate(320deg);-o-transform:rotate(320deg);-ms-transform:rotate(320deg);position:absolute;top:19px;right:12px;transition:all .3s linear;}
#footer-widgetfix .footer-widget {width:46%;float:left;margin-left:20px;}}

@media only screen and (max-width:768px){
#outer-wrapper {padding:0 12px;}
#post-wrapper, #sidebar-wrapper {width:100%;max-width:100%}
.post-body img {max-width:90%;}
.img-thumbnail {margin:0 10px 0 0;}
.sidebar-inner, .post-inner {padding:15px 0 0px;}
ul#relpost_img_sum li {width:100%}
#credit {float:none;margin:0 auto;text-align:center;}
.cpleft,.cpright {float:none;text-align:center;margin:10px;}}

@media only screen and (max-width:640px){
#header h1,#header p,#header,.header-right,#header .description{margin:0 auto;width:100%;float:none;text-align:center;}
#header{margin-bottom:10px;margin-top:10px;}
.header-right{float:none;margin-top:0px;margin:0 auto;text-align:center;}
.header-right img, .header-right iframe{float:none;margin:0 auto;text-align:center;}
#header-wrapper{width:100%!important;padding:0;}
#outer-wrapper {padding:0 10px;}
#post-wrapper,#sidebar-wrapper,#footer-col1,#footer-col2,#footer-col3 {width:100%;max-width:100%}
h2.post-title, h1.post-title, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {font-size:18px;}
.opt-in .inner .ct-wrapper {padding:0 10px;}
.sidebar-inner, .post-inner{padding:10px 0 0px;}
.post {margin:0 0 10px;padding:10px;}
#footer-widgetfix {width:100%;overflow:hidden;}
#footer-widgetfix .footer-widget {width:92%;float:left;margin-left:20px;}
#credit {float:none;margin:0 auto;text-align:center;}
.cpleft,.cpright {float:none;text-align:center;margin:10px;}
#social_networks{text-align:center;margin:0 auto;}
#notif,#notif2 {display:none;visibility:hidden;}}

@media only screen and (max-width:480px){
#outer-wrapper {margin:0 auto;margin-top:70px}
.header-right{float:none;margin-top:0px;margin:0 auto;text-align:center;}
.header-right img, .header-right iframe{float:none;margin:0 auto;text-align:center;}
#outer-wrapper {padding:0 8px;}
.post {margin:0 0 8px;padding:8px;}
h2.post-title, h1.post-title {font-size:16px;}
.img-thumbnail, .img-thumbnail img {width:120px;height:90px;}
.img-thumbnail {margin:0 8px 0 0;}
.comments .comment-block, .comments .comments-content .inline-thread {
padding:10px !important;}
.comment .comment-thread.inline-thread .comment {margin: 0 0 0 0 !important;}
#related_posts {margin:20px 20px 20px 0;padding:0;}
.post-info {font-size:12px;}
#feedContainer li {width:100%;}}

@media screen and (max-width:320px){
.header-right{float:none;margin-top:0px;margin:0 auto;text-align:center;}
.header-right img, .header-right iframe{float:none;margin:0 auto;text-align:center;}
#outer-wrapper {padding:0 6px;}
.post {padding:6px;}
.img-thumbnail, .img-thumbnail img {width:100px;height:80px;}
#footer-widgetfix {width:100%;overflow:hidden;}
#footer-widgetfix .footer-widget {width:87%;float:left;margin-left:20px;}}

Contoh CSS Responsive Untuk Ukuran Huruf di Homepage

/* CSS Homepage Responsive */

@media only screen and (max-width:640px){
h2.post-title, h1.post-title, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {font-size:18px;}
.post-body {margin-bottom:10px;}
a.read-more,.readm {display:none;}
.img-thumbnail {width:120px;height:100px;}
.img-thumbnail img {width:120px;height:100px;}
.img-thumbnail:before{display:none;}}

@media only screen and (max-width:480px){
h2.post-title, h1.post-title, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {font-size:16px;}
.img-thumbnail {width:80px;height:60px;}
.img-thumbnail img {width:80px;height:60px;}
.img-thumbnail:before{display:none;}}

@media only screen and (max-width:320px){
h2.post-title, h1.post-title, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {font-size:14px;}}



Contoh CSS Untuk Item Responsive
/* CSS Item Responsive */
@media only screen and (max-width:640px){
ul#relpost_img_sum li {float:left;list-style:none;overflow:hidden;width:90%;}}

@media only screen and (max-width:320px){
h3.post-title:before,h1.post-title:before,h3.post-title:after,h1.post-title:after,h3.post-title:after,h1.post-title:after,#comments .click-comment {visibility:hidden;}
.printfriendly, #related_posts {display:none;}
#comments .comment_avatar {width:20px;height:20px;max-width:20px;max-height:20px;background:#fcfcfc;padding:0;text-align:center;position:absolute;top:5px;right:5px;opacity:1;}
#comments .comment_admin .comment_avatar{width:20px;height:20px;max-width:20px;max-height:20px;padding:4px 4px 19px;text-align:center;position:absolute;top:0;right:0;opacity:1;}
#comments .comment_avatar img {width:20px;height:20px;max-width:20px;max-height: 20px;background:#f9f9f9;}
.comment_avatar img{width:20px;height:20px;background:#f9f9f9;}}

Keterangan :
  • Tulisan berwarna biru  merupakan Kode utama dalam pembuatan CSS Responsive dan Ukuran (max-width:320px) Merupakan Ukuran tampilan responsive jika di buka dengan lebar screen/layar max 320px.
  • Tulisan berwarna merah merupakan kode ID pada elemen blog. dan kode ID tersebut tidak selalu sama. jadi Anda bisa melihat ID pada elemen blog masing-masing. Fungsi kode ID pada responsive yaitu : Jika Web/blog di buka pada layar ukuran  (max-width:320px), Maka #header{margin-bottom:10px;}Header dibuka dengan bottom 10px. dan Jika Pada tampilan responsive Anda tidak ingin menampilkan kolom Sidebar, Maka Anda cukup menulis #sidebar { Display:none;} dan di tulis pada tampilan layar yang Anda kehendaki.

Bagikan

Jangan lewatkan

Contoh Kode CSS Untuk Tampilan Responsive
4/ 5
Oleh
Komentar

Subscribe via email

Suka dengan artikel di atas? Tambahkan email Anda untuk berlangganan.

Terimakasih telah memberi komentar di sonirivaldi.blogspot.com

Subscribe to: Post Comments (Atom)
loading...