Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata # 2

Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata  # 2
Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata  # 2

Dalam Posting Sebelumnya  Saya telah menyebutkan bahwa kita akan belajar tentang cara membuat gambar bulat menggunakan CSS, tanpa perlu mengedit satu per satu menggunakan program. Sekarang kita telah melihat dasar-dasar CSS, mari kita coba untuk menerapkannya pada beberapa gambar.

Apa yang akan kita lakukan dalam tutorial ini adalah untuk meng-upload gambar (HTML) dan kemudian menambahkan beberapa aturan dalam stylesheet yang akan mengubah bentuk luar terlihat seperti lingkaran ... atau, setidaknya, untuk tampil putaran. Ini akan tergantung pada proporsi gambar yang akan kita gunakan.

Bahkan, kita dapat menerapkan efek ini untuk gambar apapun, untuk bagian tertentu dari blog kita atau untuk semua gambar yang ditemukan di blog kami. Hal ini tergantung pada selera Anda.

Menandai HTML                                             


Jelas, hal pertama yang perlu kita lakukan dalam rangka untuk menetapkan batas bulat sekitar gambar adalah untuk mendapatkan gambar dan meng-upload untuk mendapatkan struktur html. kode bisa menjadi sedikit lebih rumit, tetapi gambar dapat dibangun dalam tag img, yang pada dasarnya, terlihat seperti ini:
<img src="image_URL"/>

Screenshot

Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata  # 2
Dashbboard blogger

Menambahkan kode ini di dalam HTML pos dengan url gambar kita - bukan teks warna biru – tapi kita akan dapat menampilkannya seperti gambar ini di sebelah kiri.

Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata  # 2

Biasanya, itu juga mungkin berisi teks alt, dan kadang-kadang, mungkin memiliki beberapa dimensi yang telah ditentukan (dengan lebar tertentu dan / atau tinggi). Ketika kita upload gambar menggunakan editor posting Blogger, kode ini juga akan memiliki link yang menunjuk ke gambar asli.

Tetapi jika kita ingin memodifikasi gambar ini menggunakan CSS, kita perlu menambahkan pemilih kelas. Kita bisa menambahkannya dalam dua cara: dalam tag img . Nama yang  telah saya pilih untuk pemilih gambar sudut tumpul, namun, Anda dapat menambahkan nama yang Anda inginkan:
<img class="roundedcorners" src="image_URL"/>

Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata  # 2

<div class="roundedcorners">
<img src="image_URL"/>
</div>

 

Menerapkan Gaya ke Semua Elemen Yang Sama                                             

Tapi pemilih itu sendiri tidak akan melakukan sesuatu yang istimewa. Perlu dikaitkan dengan aturan gaya memberitahu apa yang harus dilakukan dengan itu. Sama jika ketika kita menambahkan hanya kelas, jika ini tidak didefinisikan dalam CSS, penampilan gambar (atau elemen tertentu) tidak akan berubah.

Untuk mengubah bentuk dari semua gambar pada blog kita, ini adalah apa yang harus kita tambahkan ke CSS kami:
img {
border: 2px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 1000px;
-moz-border-radius: 1000px;
}

Dan bagaimana ini diterjemahkan ke browser Anda?

Mencari gambar dengan nama tag img dan menerapkan gaya berikut:

Perbatasan hijau solid 2 piksel

Mengatur margin (ruang di luar perbatasan) dan padding (ruang di dalam perbatasan) ke nol

Menerapkan bulat sudut tampilan untuk semua empat penjuru

Sekarang  kita memiliki aturan ini dalam lembar gaya kita sendiri, saya akan dapat melihat gambar seperti yang kita inginkan - lihat gambar di sebelah kanan.

Untuk mendeklarasikan properti dengan benar, kita perlu tahu apa yang dilakukan dan bagaimana menulis itu dengan rincian yang dapat ditemukan di seluruh internet, meskipun W3C  adalah otoritas dalam hal ini.

Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata  # 2


Misalnya, properti border-radius awalnya memerlukan empat (4) nilai-nilai membaca dari kiri ke kanan, yang mewakili kebulatan dari, kanan kiri atas, kanan bawah dan sudut kiri bawah. Jika Anda menambahkan ini, itu akan membuat semua empat penjuru untuk menjadi setara dengan nilai tersebut.

Hal ini penting untuk menyebutkan bahwa ketika nilai perbatasan melebihi dimensi wadah, perbatasan ini akan membuat lingkaran.

Bagaimana Menerapkan Gaya Yang Sama                                                        

Kadang-kadang, kita tidak ingin semua gambar di blog kita untuk menjadi bulat, kecuali hanya orang-orang yang kita pilih untuk melihatnya, jika tidak menambahkan gaya di atas dalam tag head akan membuat semua gambar menjadi beda. Sebelum, kami menggunakan HTML tag img, bukan untuk memilih melainkan , untuk alasan ini, gaya akan mempengaruhi semua gambar kami.

Untuk menghindari hal ini, kita dapat melakukan salah satu hal yang kita lihat di awal posting ini dan itu untuk menempatkan gambar di dalam div dengan kelas roundedcorners. Dengan cara ini, hanya gambar dalam wadah dengan kelas yang akan terpengaruh oleh aturan yang akan membuat mereka bulat.
<div class="roundedcorners"><img src="image_URL"/></div>

Tapi aturan itu seharusnya tidak mempengaruhi tag img langsung, tapi pemilih roundedcorners. Dalam hal ini, Anda harus menulis seperti ini:
.roundedcorners img {
border: 2px solid #BADA55;
....
}

Ini berarti bahwa hanya berlaku untuk gambar yang berada dalam wadah dengan kelas roundedcorners.

Akhir Kata                                                         


Untuk mengakhiri tutorial ini untuk menciptakan gambar dengan batas bulat, perlu diingat bahwa jika ini tidak persegi, bukannya menjadi melingkar, mereka akan terlihat oval:

Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata  # 2


Untuk memperbaiki ini kita harus menambahkan lebar dan tinggi dengan ukuran yang sama (nilai dalam pixel) untuk memaksa tanam gambar dan untuk membuatnya tampak sempurna melingkar. Itu saja!

Jika Anda menikmati membaca blog ini, silakan berbagi dan berlangganan. Untuk setiap pertanyaan, drop komentar di bawah ini

Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata # 1

Dasar-dasar CSS. Cara Menerapkan Sudut Tumpul Pada Gambar # 1
CSS

Tutorial ini akan menjelaskan bagaimana mengubah batasan luar dari setiap gambar dengan menggunakan beberapa aturan CSS sederhana untuk membuatnya menjadi bulat, tapi ini sangat mudah untuk dilakukan, akhirnya akan membuat posting anda lebih elegant.

Trik ini akan saya akan publikasikan dalam dua bagian, gunanya  adalah untuk membantu Anda memahami, setidaknya, sedikit dari apa CSS (Cascading Style Sheets) adalah.

Bagi mereka yang ingin mempelajari lebih lanjut, silakan lihat di Link Ini  dan bagi mereka yang benar-benar ingin belajar secara menyeluruh, saya sarankan untuk mengunjungi Situs Ini.

Dasar-dasar CSS. Cara Menerapkan Sudut Tumpul Pada Gambar # 1
CSS


Pendahuluan dan Lembar Terminologi        


Gaya ini bertujuan untuk membantu memilah struktur apa dari sebuah situs web  yang formatnya atau penampilannya. Jadi, model kotak CSS adalah, sebuah kotak yang membungkus di sekitar elemen HTML, dan menentukan bagaimana kotak-kotak disajikan dalam hal warna, font, lebar, latar belakang dll.

Keuntungannya adalah bahwa, kapan saja kita memutuskan untuk mengubah sesuatu, kita tidak harus mengubah semua halaman satu per satu, tetapi hanya, mengubah properti dari style sheet  dan modifikasi nya secara otomatis yang akan berlaku di semua halaman.

Style sheet adalah seperangkat aturan yang terbuat dari pemilih dan deklarasi. Maksudnya pemilih yang akan digunakan sebagai nama panggilan atau nama dari apa yang Anda ingin mengkonfigurasi dari style sheet dan berlaku untuk HTML, dan deklarasi adalah properti yang kita tambahkan dari nilai-nilai yang diinginkan (informasi lebih lanjut tentang Sintaks CSS

Dasar-dasar CSS. Cara Menerapkan Sudut Tumpul Pada Gambar # 1
CSS 


Menambahkan Pemilih CSS                                  


Jika kita menambahkan, misalnya, kode di atas dalam lembar gaya , kami mungkin tidak melihat apa-apa terjadi khususnya di website . Seperti yang telah saya sebutkan di atas, pemilih berkaitan dengan HTML dan CSS ,sehingga jika kita ingin kotak untuk mengambil nilai-nilainya  untuk melihat lebar, warna latar belakang, perbatasan dan ukuran font, kita perlu menyertakan pemilih dalam HTML halaman elemen, seperti ini:

<div class="SelectorName">Text here</div>

Di sini kita menambahkan beberapa aturan untuk memberitahu browser menafsirkan bahwa kotak ini harus menjadi tipe tertentu atau kelas. Kelas ini atau pemilih bisa memiliki beberapa sifat tertentu dan nilai-nilai yang didefinisikan dalam style sheet, seperti yang Anda lihat pada gambar di atas.

Sekarang mari kita lihat bagaimana ini akan mengubah tampilan kotak, sementara semua orang lain yang tidak memiliki nama SelectorName akan mengikuti penampilan standar.

Pada dasarnya, ketika kita menambahkan aturan dalam style sheet, atau memodifikasi yang sudah ada, apa yang terjadi adalah bahwa semua kotak yang ditandai dengan pemilih yang akan mengubah penampilan mereka sesuai dengan sifat dan nilai-nilai yang telah kita didefinisikan dalam style sheet.

Dimana Untuk Menambahkan Gaya CSS                   

Gaya ini dapat ditambahkan dalam file CSS eksternal - membuat file CSS dengan semua aturan, meng-upload di situs hosting dan mendapatkan URL dari file. Untuk memanfaatkannya, termasuk baris berikut di header template Anda. Untuk Blogger, Anda dapat menambahkannya antara <head> dan <b: skin> <[CDATA [/ *:
<link href="syle.css" rel="stylesheet" type="text/css"/>

Catatan: Mengganti teks warna biru dengan url dari file CSS.

Anda juga dapat menambahkan gaya langsung dalam HTML template dengan menambahkan CSS antara tag gaya:
<style>
.SelectorName {
background-color: #EAEAEA;
border: 1px solid #444444;
width: 200px;
font-size: 12px;
}
</style>

Ini dapat ditambahkan dalam HTML dari elemen halaman juga. Dalam hal ini, Anda tidak perlu menambah pemilih apapun untuk menunjukkan di mana gaya CSS adalah:
<div style="background-color: #EAEAEA; border: 1px solid #444444; width: 200px; font-size: 12px;">Text here</div>


Di Blogger, aturannya  antara <b: skin> <[CDATA [/ * dan ]] / b: skin> tag. Jika kita mengakses HTML dari template kita, kita akan menemukan sekelompok kode di antara tag ini, yang sebenarnya adalah styling CSS yang mendefinisikan tampilan blog kita.
Bagi mereka yang tidak ingin menyentuh kode template, kita dapat menambahkan CSS langsung dengan pergi ke desainer Blogger Template> Lanjutan> Tambah CSS.

Dasar-dasar CSS. Cara Menerapkan Sudut Tumpul Pada Gambar # 1
CSS blogger


Itu cukup untuk hari ini. Pada tutorial berikutnya kita akan mengenal cara menambahkan sudut dibulatkan ke gambar kami menggunakan CSS >> Cara Membuat Gambar Telihat Nyata Dengan CSS Bagian #2

Menambahkan Efek Tombol Keyboard Untuk Teks di Blogger dengan CSS


Bagi banyak dari kita desain dari template adalah yang paling penting, karena membuat pembaca lebih tertarik dan datang kembali ke blog kita. Ada elemen HTML dimaksudkan untuk ditambahkan tombol keyboard bernama <kbd> yang dapat ditata dengan CSS, jadi mengapa kita tidak menggunakannya untuk membuat elemen-elemen tersebut terlihat seperti tombol keyboard?

Dengan demikian, dalam tutorial ini, saya akan Menunjukkan Cara Untuk Membuat Efek Tombol Keyboard Dengan CSS. Tidak dibutuhkan gambar sehingga blog Anda akan memuat lebih cepat.



Bagaimana Menambahkan Tombol Keyboard ke Blogger                             


Langkah 1. Dari Blogger Dashboard , pilih blog Anda dan pergi ke Template> Edit HTML



Langkah 2. Klik di mana saja di dalam area kode, tekan tombol Ctrl + F dan cari potongan kode ini:
]]></b:skin>

Screenshot



Langkah 3: Tepat di atas ]]> </ b: skin> sisipkan gaya CSS ini:
kbd{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

Langkah 4. Untuk menyimpan perubahan, tekan tombol perubahan Simpan.

Terakhir, kita perlu menambahkan html <kbd> tag untuk teks yang kita ingin untuk menerapkan tombol bergaya   keyboard .From dashboard blogger Anda, pergi untuk membuat  New Post , tulis teks yang kamu ingin
<kbd>Ctrl</kbd> + <kbd>F</kbd>

Screenshot



Ini akan membuatnya terlihat seperti ini:


Cara Upload CSS Blogger dan File JavaScript ke Google Drive

file javascript google drive
Google drive

Siapa pun yang pernah bekerja pada desain web  dapat memberitahu Anda bahwa di mana Anda memutuskan untuk menyimpan file Anda dan itu adalah penting. Setiap kali seseorang mengunjungi situs Anda, server atau host akan mengakses lokasi ini dan membawa file yang relevan yang perlu ditampilkan. Di mana pun Anda memutuskan untuk menyimpan file Anda, ini akan berdampak pada beberapa aspek penting seperti kecepatan  beban situs Anda, peringkat SEO Anda secara keseluruhan dan kemampuan Anda untuk membuat penyesuaian yang diperlukan untuk situs.