Membuat Berita Cuaca di Blog Dengan CSS

Membuat Berita Cuaca di Blog dengan CSS- Pernahkah anda mendengar tentang laporan prakiraan cuaca? Dalam siaran berita di televisi terkadang di selingi dengan laporan prakiraan cuaca. Laporan berita tersebut bertujuan untuk mengetahui keadaan cuaca antara satu tempat dan tempat lainnya.

Selain anda melihat dan mendengan perkiraan atau berita cuaca di televisi, mungkin Anda juga pernah melihatnya di suatu Blog ketika berkunjung dengan memasang widget pemberitahuan cuaca. Anda bisa membuat dan memasangnya widget pemberitahuan cuaca pada Blog Anda dengan melalui situs penyedia layanan pembuatan widget pemberitahuan cuaca.

Demo   CODE

Untuk pemberitahuan cuaca ini menciptakannya dengan properti CSS, tampilannya sangat cantik dan menarik terlihat seperti Animasi gerak pada gambar. Tertari.......
Berikut ini langkah mudahnya :

Silahkan Anda salin kode CSS dibawah ini, lalu pasangkan sesudah atau sebelum kode ]]></b:skin>

/*weather notice*/
.container {
    width: 1120px;
    height: auto;
    margin: 0 auto;
}
header {
    margin: 75px 0;
}
header h1 {
    font-weight: 600;
    font-size: 1.4rem;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.card {
    width: 18.57%;
    background-color: #3c3b3d;
    float: left;
    margin: 0 20px 20px 0;
    overflow: hidden;
}
.card:nth-child(5n) {
    margin-right: 0;
}
.card .card-color {
    position: relative;
    width: 100%;
    padding: 6.5em 1em;
    display: block;
}
.card .card-color:after {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
}
.card .card-color.color-sunny {
    background-color: #4FC1E9;
}
.card .card-color.color-snow {
    background-color: #CCD1D9;
}
.card .card-color.color-moon {
    background-color: #000;
}
.card .card-color.color-storm {
    background-color: #656D78;
}
.card .card-color.color-rain {
    background-color: #41BA9C;
}
.card .card-info {
    padding: 1em;
    color: #808080;
    text-align: center;
}
.card .card-info p {
    font-size: 0.85rem;
    margin-bottom: .75em;
}
.card .card-info p:first-child {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #fff;
}
.card .card-info p:last-child {
    margin-bottom: 0;
}
/* Sunny */

.sunny {
    -webkit-animation: sunny 9s linear infinite;
    background: #ffe400;
    border-radius: 100%;
    box-shadow: rgba(255, 255, 0, 0.1) 0 0 5px 5px;
    content: '';
    height: 90px;
    width: 90px;
    position: absolute;
    left: 60px;
    top: 60px;
}
.sunny:before {
    -webkit-animation: sunglow 9s ease-in-out infinite;
    background: #FFEE44;
    box-shadow: rgba(255, 255, 0, 1) 0 0 5px 1px;
    border-radius: 100%;
    content: '';
    height: 86px;
    width: 86px;
    position: absolute;
    left: 2px;
    top: 2px;
}
.sunny:after {
    -webkit-animation: sunshadow 9s ease-in-out infinite;
    background: #000000;
    border-radius: 50%;
    content: '';
    height: 15px;
    width: 120px;
    opacity: 0.2;
    position: absolute;
    left: -15px;
    bottom: -40px;
    -webkit-transform: scale(.7);
}
@-webkit-keyframes sunny {
    50% {
        -webkit-transform: translateY(-20px);
        box-shadow: rgba(255, 255, 0, 0.2) 0 0 5px 15px;
    }
}
@-webkit-keyframes sunglow {
    50% {
        box-shadow: rgba(255, 255, 0, 0.1) 0 0 5px 10px;
    }
}
@-webkit-keyframes sunshadow {
    50% {
        -webkit-transform: translateY(20px) scale(1);
        opacity: .05;
    }
}
/* Moon */

.moon {
    -webkit-animation: moon_star 5s ease-in-out infinite;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: #FFFFFF 26px 7px 0 -1px, rgba(255, 255, 255, 0.1) -36px -19px 0 -1px, rgba(255, 255, 255, 0.1) -51px -34px 0 -1px, #FFFFFF -52px -62px 0 -1px, #FFFFFF 14px -37px, rgba(255, 255, 255, 0.1) 41px -19px, #FFFFFF 34px -50px, rgba(255, 255, 255, 0.1) 14px -71px 0 -1px, #FFFFFF 64px -21px 0 -1px, rgba(255, 255, 255, 0.1) 32px -85px 0 -1px, #FFFFFF 64px -90px, rgba(255, 255, 255, 0.1) 60px -67px 0 -1px, #FFFFFF 34px -127px, rgba(255, 255, 255, 0.1) -26px -103px 0 -1px;
    height: 4px;
    width: 4px;
    opacity: 1;
    position: absolute;
    left: 90px;
    top: 155px;
}
.moon:before {
    -webkit-animation: moon 9s ease-in-out infinite;
    border-radius: 50%;
    box-shadow: #FFFFFF -35px 0;
    content: '';
    height: 100px;
    width: 100px;
    position: absolute;
    top: -106px;
    -webkit-transform: rotate(-5deg);
    -webkit-transform-origin: 0 50%;
}
.moon:after {
    -webkit-animation: moon 9s ease-in-out infinite;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) -5px 0 0;
    content: '';
    height: 100px;
    width: 100px;
    position: absolute;
    top: -106px;
    left: -30px;
    -webkit-transform: rotate(-5deg);
    -webkit-transform-origin: 30px 50%;
}
@-webkit-keyframes moon {
    50% {
        -webkit-transform: rotate(10deg);
    }
}
@-webkit-keyframes moon_star {
    50% {
        box-shadow: rgba(255, 255, 255, 0.1) 26px 7px 0 -1px, #FFFFFF -36px -19px 0 -1px, #FFFFFF -51px -34px 0 -1px, rgba(255, 255, 255, 0.1) -52px -62px 0 -1px, rgba(255, 255, 255, 0.1) 14px -37px, #FFFFFF 41px -19px, rgba(255, 255, 255, 0.1) 34px -50px, #FFFFFF 14px -71px 0 -1px, rgba(255, 255, 255, 0.1) 64px -21px 0 -1px, #FFFFFF 32px -85px 0 -1px, rgba(255, 255, 255, 0.1) 64px -90px, #FFFFFF 60px -67px 0 -1px, rgba(255, 255, 255, 0.1) 34px -127px, #FFFFFF -26px -103px 0 -1px;
    }
}
/* storm */

.storm {
    -webkit-animation: storm 9s ease-in-out infinite;
    background: #393939;
    border-radius: 50%;
    box-shadow: #393939 65px -25px 0 -5px, #393939 25px -25px, #393939 5px 0px 0 2px, #393939 10px 0px 0 2px, #393939 15px 0px 0 2px, #393939 20px 0px 0 2px, #393939 25px 0px 0 2px, #393939 30px 0px 0 2px, #393939 35px 0px 0 2px, #393939 40px 0px 0 2px, #393939 45px 0px 0 2px, #393939 50px 0px 0 2px, #393939 55px 0px 0 2px, #393939 60px 0px 0 2px, #393939 65px 0px 0 2px, #393939 70px 0px 0 2px, #393939 75px 0px 0 2px;
    height: 50px;
    width: 50px;
    position: absolute;
    left: 40px;
    top: 80px;
}
.storm:after {
    -webkit-animation: storm_shadow 9s ease-in-out infinite;
    background: #000;
    border-radius: 50%;
    content: '';
    height: 15px;
    width: 120px;
    opacity: 0.2;
    position: absolute;
    left: 5px;
    bottom: -60px;
    -webkit-transform: scale(.7);
}
.storm:before {
    -webkit-animation: storm_thunder 3s steps(1, end) infinite;
    border-right: 7px solid transparent;
    border-top: 33px solid yellow;
    box-shadow: yellow -2px -30px, rgba(255, 258, 0, 0.4) -2px -30px 10px;
    content: '';
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    left: 57px;
    top: 70px;
    -webkit-transform: rotate(14deg);
    -webkit-transform-origin: 50% -60px;
}
@-webkit-keyframes storm {
    50% {
        -webkit-transform: translateY(-20px);
    }
}
@-webkit-keyframes storm_shadow {
    50% {
        -webkit-transform: translateY(20px) scale(1);
        opacity: 0.05;
    }
}
@-webkit-keyframes storm_thunder {
    0% {
        -webkit-transform: rotate(20deg);
        opacity: 1;
    }
    5% {
        -webkit-transform: rotate(-34deg);
        opacity: 1;
    }
    10% {
        -webkit-transform: rotate(0deg);
        opacity: 1;
    }
    15% {
        -webkit-transform: rotate(-34deg);
        opacity: 0;
    }
}
/* snow */

.snow {
    -webkit-animation: snow 9s ease-in-out infinite 1s;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: #ffffff 65px -25px 0 -5px, #ffffff 25px -25px, #ffffff 5px 0px 0 2px, #ffffff 10px 0px 0 2px, #ffffff 15px 0px 0 2px, #ffffff 20px 0px 0 2px, #ffffff 25px 0px 0 2px, #ffffff 30px 0px 0 2px, #ffffff 35px 0px 0 2px, #ffffff 40px 0px 0 2px, #ffffff 45px 0px 0 2px, #ffffff 50px 0px 0 2px, #ffffff 55px 0px 0 2px, #ffffff 60px 0px 0 2px, #ffffff 65px 0px 0 2px, #ffffff 70px 0px 0 2px, #ffffff 75px 0px 0 2px;
    display: block;
    height: 50px;
    width: 50px;
    position: absolute;
    left: 40px;
    top: 80px;
}
.snow:after {
    -webkit-animation: snow_shadow 9s ease-in-out infinite 1s;
    background: #000000;
    border-radius: 50%;
    content: '';
    height: 15px;
    width: 120px;
    opacity: 0.2;
    position: absolute;
    left: 8px;
    bottom: -60px;
    -webkit-transform: scale(.7);
}
.snow:before {
    -webkit-animation: snow_snow 2s infinite linear;
    content: '';
    border-radius: 50%;
    display: block;
    height: 7px;
    width: 7px;
    opacity: 0.8;
    -webkit-transform: scale(.9);
}
@-webkit-keyframes snow {
    50% {
        -webkit-transform: translateY(-20px);
    }
}
@-webkit-keyframes snow_shadow {
    50% {
        -webkit-transform: translateY(20px) scale(1);
        opacity: 0.05;
    }
}
@-webkit-keyframes snow_snow {
    0% {
        box-shadow: rgba(238, 238, 238, 0) 30px 30px, rgba(238, 238, 238, 0) 40px 40px, #EEEEEE 50px 75px, #EEEEEE 55px 50px, #EEEEEE 70px 100px, #EEEEEE 80px 95px, #EEEEEE 110px 45px, #EEEEEE 90px 35px;
    }
    25% {
        box-shadow: #EEEEEE 30px 45px, #EEEEEE 40px 60px, #EEEEEE 50px 90px, #EEEEEE 55px 65px, rgba(238, 238, 238, 0) 70px 120px, rgba(238, 238, 238, 0) 80px 120px, #EEEEEE 110px 70px, #EEEEEE 90px 60px;
    }
    26% {
        box-shadow: #EEEEEE 30px 45px, #EEEEEE 40px 60px, #EEEEEE 50px 90px, #EEEEEE 55px 65px, rgba(238, 238, 238, 0) 70px 40px, rgba(238, 238, 238, 0) 80px 20px, #EEEEEE 110px 70px, #EEEEEE 90px 60px;
    }
    50% {
        box-shadow: #EEEEEE 30px 70px, #EEEEEE 40px 80px, rgba(238, 238, 238, 0) 50px 100px, #EEEEEE 55px 80px, #EEEEEE 70px 60px, #EEEEEE 80px 45px, #EEEEEE 110px 95px, #EEEEEE 90px 85px;
    }
    51% {
        box-shadow: #EEEEEE 30px 70px, #EEEEEE 40px 80px, rgba(238, 238, 238, 0) 50px 45px, #EEEEEE 55px 80px, #EEEEEE 70px 60px, #EEEEEE 80px 45px, #EEEEEE 110px 95px, #EEEEEE 90px 85px;
    }
    75% {
        box-shadow: #EEEEEE 30px 95px, #EEEEEE 40px 100px, #EEEEEE 50px 60px, rgba(238, 238, 238, 0) 55px 95px, #EEEEEE 70px 80px, #EEEEEE 80px 70px, rgba(238, 238, 238, 0) 110px 120px, rgba(238, 238, 238, 0) 90px 110px;
    }
    76% {
        box-shadow: #EEEEEE 30px 95px, #EEEEEE 40px 100px, #EEEEEE 50px 60px, rgba(238, 238, 238, 0) 55px 35px, #EEEEEE 70px 80px, #EEEEEE 80px 70px, rgba(238, 238, 238, 0) 110px 25px, rgba(238, 238, 238, 0) 90px 15px;
    }
    100% {
        box-shadow: rgba(238, 238, 238, 0) 30px 120px, rgba(238, 238, 238, 0) 40px 120px, #EEEEEE 50px 75px, #EEEEEE 55px 50px, #EEEEEE 70px 100px, #EEEEEE 80px 95px, #EEEEEE 110px 45px, #EEEEEE 90px 35px;
    }
}
/*Rain*/

.rain {
    -webkit-animation: rain 9s ease-in-out infinite 1s;
    background: #CCCCCC;
    border-radius: 50%;
    box-shadow: #CCCCCC 65px -25px 0 -5px, #CCCCCC 25px -25px, #CCCCCC 5px 0px 0 2px, #CCCCCC 10px 0px 0 2px, #CCCCCC 15px 0px 0 2px, #CCCCCC 20px 0px 0 2px, #CCCCCC 25px 0px 0 2px, #CCCCCC 30px 0px 0 2px, #CCCCCC 35px 0px 0 2px, #CCCCCC 40px 0px 0 2px, #CCCCCC 45px 0px 0 2px, #CCCCCC 50px 0px 0 2px, #CCCCCC 55px 0px 0 2px, #CCCCCC 60px 0px 0 2px, #CCCCCC 65px 0px 0 2px, #CCCCCC 70px 0px 0 2px, #CCCCCC 75px 0px 0 2px;
    display: block;
    height: 50px;
    width: 50px;
    position: absolute;
    left: 40px;
    top: 80px;
}
.rain:after {
    -webkit-animation: rain_shadow 9s ease-in-out infinite 1s;
    background: #000000;
    border-radius: 50%;
    content: '';
    height: 15px;
    width: 120px;
    opacity: 0.2;
    position: absolute;
    left: 5px;
    bottom: -60px;
    -webkit-transform: scale(.7);
}
.rain:before {
    -webkit-animation: rain_rain .7s infinite linear;
    content: '';
    background: transparent;
    margin-left: 0px;
    border-radius: 50%;
    display: block;
    height: 6px;
    width: 3px;
    opacity: 0.3;
    -webkit-transform: scale(.9);
}
@-webkit-keyframes rain {
    50% {
        -webkit-transform: translateY(-20px);
    }
}
@-webkit-keyframes rain_shadow {
    50% {
        -webkit-transform: translateY(20px) scale(1);
        opacity: 0.05;
    }
}
@-webkit-keyframes rain_rain {
    0% {
        box-shadow: rgba(0, 0, 0, 0) 30px 30px, rgba(0, 0, 0, 0) 40px 40px, blue 50px 75px, blue 55px 50px, blue 70px 100px, blue 80px 95px, blue 110px 45px, blue 90px 35px;
    }
    25% {
        box-shadow: blue 30px 45px, blue 40px 60px, blue 50px 90px, blue 55px 65px, rgba(0, 0, 0, 0) 70px 120px, rgba(0, 0, 0, 0) 80px 120px, blue 110px 70px, blue 90px 60px;
    }
    26% {
        box-shadow: blue 30px 45px, blue 40px 60px, blue 50px 90px, blue 55px 65px, rgba(0, 0, 0, 0) 70px 40px, rgba(0, 0, 0, 0) 80px 20px, blue 110px 70px, blue 90px 60px;
    }
    50% {
        box-shadow: blue 30px 70px, blue 40px 80px, rgba(0, 0, 0, 0) 50px 100px, blue 55px 80px, blue 70px 60px, blue 80px 45px, blue 110px 95px, blue 90px 85px;
    }
    51% {
        box-shadow: blue 30px 70px, blue 40px 80px, rgba(0, 0, 0, 0) 50px 45px, blue 55px 80px, blue 70px 60px, blue 80px 45px, blue 110px 95px, blue 90px 85px;
    }
    75% {
        box-shadow: blue 30px 95px, blue 40px 100px, blue 50px 60px, rgba(0, 0, 0, 0) 55px 95px, blue 70px 80px, blue 80px 70px, rgba(0, 0, 0, 0) 110px 120px, rgba(0, 0, 0, 0) 90px 110px;
    }
    76% {
        box-shadow: blue 30px 95px, blue 40px 100px, blue 50px 60px, rgba(0, 0, 0, 0) 55px 35px, blue 70px 80px, blue 80px 70px, rgba(0, 0, 0, 0) 110px 25px, rgba(0, 0, 0, 0) 90px 15px;
    }
    100% {
        box-shadow: rgba(0, 0, 0, 0) 30px 120px, rgba(0, 0, 0, 0) 40px 120px, blue 50px 75px, blue 55px 50px, blue 70px 100px, blue 80px 95px, blue 110px 45px, blue 90px 35px;
    }
}

Selanjutnya Anda copy kode dibawah ini dan pasangkan pada widget atau di tempat yang Anda kehendaki .

Berita Cuaca Hujan

• 
  
  63 ℉
  low of 61 ℉

<div class="container">
<ul class="card-list">
<li class="card">
<div class="card-color color-rain">
                <div class="rain">
</div>
</div>
<div class="card-info">
                63 ℉
low of 61 ℉
</div></li></ul>
</div>

Berita Cuaca Mendung Berpetir

• 
  
  72 ℉
  low of 68 ℉

<div class='container'>
<ul class='card-list'>
<li class='card'>
<div class='card-color color-storm'>
                <div class='storm'>
</div>
</div>
<div class='card-info'>
                72 &#8457;
low of 68 &#8457;
</div></li></ul>
</div>

Berita Cuaca Cerah

• 
  
  77 ℉
  low of 73 ℉

<div class='container'>
<ul class='card-list'>
<li class='card'>
<div class='card-color color-sunny'>
                <div class='sunny'>
</div>
</div>
<div class='card-info'>
                77 &#8457;
low of 73 &#8457;
</div></li></ul>
</div>

Berita Cuaca Malam Hari Cerah.

• 
  
  71 ℉
  low of 67 ℉

<div class='container'>
<ul class='card-list'>
<li class='card'>
<div class='card-color color-moon'>
                <div class='moon'>
</div>
</div>
<div class='card-info'>
                71 &#8457;
low of 67 &#8457;
</div></li></ul>
</div>

Berita Cuaca Hujan Salju

• 
  
  28 ℉
  low of 23 ℉

<div class='container'>
<ul class='card-list'>
<li class='card'>
<div class='card-color color-snow'>
                <div class='snow'>
</div>
</div>
<div class='card-info'>
                28 &#8457;
low of 23 &#8457;
</div></li></ul>
</div>

Semoga bermanfaat!

Source: http://www.evanwieland.com/