Funkysst.com: Efek Gambar
Showing posts with label Efek Gambar. Show all posts
Showing posts with label Efek Gambar. Show all posts

Friday, February 23, 2018

Dasar-Dasar CSS. Cara Menerapkan Sudut Bulat Pada Gambar # 2

.saya telah menyebutkan bahwa kita akan belajar tentang bagaimana membuat gambar membulat menggunakan CSS, tanpa perlu mengeditnya satu per satu menggunakan sebuah program. Sekarang setelah kita melihat dasar-dasar CSS, mari kita coba aplikasikan pada beberapa gambar

Apa yang akan kita lakukan dalam tutorial ini adalah mengupload gambar (HTML) dan kemudian menambahkan beberapa aturan di stylesheet yang akan mengubah bentuk luarnya agar terlihat seperti lingkaran ... atau, paling tidak, untuk tampil bulat. Ini akan tergantung pada proporsi gambar yang akan kita gunakan.

Sebenarnya, kita bisa menerapkan efek ini ke gambar apapun, ke bagian tertentu dari blog kita atau ke semua gambar yang ada di blog kita. Hal ini tergantung selera Anda.

Menandai HTML

Tentunya, hal pertama yang perlu kita lakukan agar bisa mengatur border yang membulat di sekitar gambar adalah mendapatkan gambar dan mengunggahnya untuk mendapatkan struktur html. Kode itu bisa sedikit lebih rumit, tapi gambar dibuat dengan tag img , yang pada dasarnya, terlihat seperti ini:
<img src = " image_URL " />
Screenshot :



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

Biasanya, mungkin juga berisi teks alt , dan terkadang, mungkin memiliki beberapa dimensi yang telah ditentukan (dengan lebar dan / atau tinggi tertentu). Saat mengunggah gambar menggunakan editor posting Blogger, kode tersebut juga memiliki tautan yang mengarah ke gambar asli.

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


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

Menerapkan gaya ke semua elemen homogen

Tapi pemilih itu saja tidak akan melakukan sesuatu yang istimewa. Ini perlu dikaitkan dengan peraturan gaya yang mengatakan apa yang harus dilakukan dengannya. Sama jika bila kita menambahkan hanya kelas, jika ini tidak didefinisikan dalam CSS, tampilan gambar (atau elemen tertentu) tidak akan berubah.

Untuk mengubah bentuk semua gambar di blog kita, inilah yang harus kita tambahkan ke CSS kita:
img {
border: 2px solid # BADA55;
margin: 0;
padding: 0;
border-radius: 1000px;
-moz-border-radius: 1000px;
}
Dan bagaimana ini diterjemahkan ke browser Anda?

Cari gambar dengan tag nama ( img ) dan terapkan gaya berikut:
  • batas hijau solid 2 piksel
  • atur margin (ruang di luar perbatasan) dan padding (ruang di dalam perbatasan) menjadi nol
  • Terapkan sudut bulat ke keempat penjuru
Sekarang kita memiliki peraturan ini di lembar gaya kita sendiri, kita akan dapat melihat gambar yang kita inginkan - lihatlah gambar di sebelah kanan.

Untuk menyatakan sebuah properti dengan benar, kita perlu tahu apa yang dilakukannya dan bagaimana cara menulisnya - rincian yang dapat ditemukan di seluruh internet, walaupun W3C adalah otoritas dalam hal ini.

Misalnya, properti border-radius pada awalnya membutuhkan empat (4) nilai pembacaan dari kiri ke kanan, yang mewakili kebalikan dari sudut kiri atas, kanan atas, kanan bawah dan kiri bawah. Jika Anda menambahkan satu nilai, itu akan membuat keempat sudut menjadi sama dengan nilai itu.

Penting untuk disebutkan bahwa bila nilai batas melebihi dimensi wadah, perbatasan ini akan menciptakan lingkaran.

Bagaimana menerapkan gaya yang sama pada t ia unsur t ia s kontainer ame

Terkadang, kita tidak ingin semua gambar di blog kita menjadi bulat, tapi hanya yang kita pilih, jika tidak menambahkan gaya di atas dalam head tag akan membuat semua gambar berbentuk seperti ini. Sebelumnya, kami menggunakan tag HTML ( img ) dan bukan pemilih dan, untuk alasan ini, gaya akan memengaruhi semua gambar kami.
Untuk menghindarinya, kita bisa melakukan salah satu hal yang kita lihat di awal posting ini dan itu adalah untuk menempatkan gambar di dalam sebuah div dengan kelas roundedcorners . Dengan cara ini, hanya gambar dalam wadah dengan kelas itu yang akan terpengaruh oleh aturan yang akan membuat mereka berputar.
<div class = " roundedcorners "> <img src = " image_URL " /> </ div>
Tapi aturannya seharusnya tidak mempengaruhi img tag secara langsung, tapi pemilih roundedcorners . Dalam hal ini, Anda harus menuliskannya seperti ini:
.roundedcorners img {
border: 2px solid # BADA55;
....
}
Ini menyiratkan bahwa gaya ini hanya berlaku untuk gambar yang berada dalam wadah dengan kelas roundedcorners.

Kata akhir

Untuk mengakhiri tutorial ini untuk membuat gambar dengan batas yang membulat, perlu diingat bahwa jika ini tidak persegi, alih-alih menjadi lingkaran, mereka akan terlihat oval:


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

Jika anda senang membaca blog ini, silahkan share dan berlangganan. Untuk pertanyaan apa pun, turunkan komentar di bawah;)

Thursday, February 8, 2018

Dasar-Dasar CSS. Cara Menerapkan Sudut Bulat Pada Gambar # 1

Tutorial ini akan menjelaskan bagaimana mengubah perbatasan luar dari setiap gambar dengan menggunakan beberapa aturan CSS sederhana untuk membuatnya bulat, tapi ini begitu mudah melakukan hal ini, bahwa aku akhirnya akan membuat posting ini untuk tujuan lain.
sudut bulat, trik css, trik blogger, desain blogger
Trik hari ini bahwa saya akan mempublikasikan dalam dua bagian adalah untuk membantu Anda untuk 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 .

Pengantar dan terminologi

style sheet bertujuan untuk membantu memilah apa struktur dari sebuah situs web dan yang formatnya atau penampilan. Jadi, model kotak CSS adalah, pada dasarnya, 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 ini secara otomatis akan berlaku di semua halaman.

Style sheet adalah seperangkat aturan yang terbuat dari pemilih dan deklarasi. 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 menambahkan nilai-nilai yang diinginkan (informasi lebih lanjut tentang sintaks CSS )

Menambahkan pemilih CSS

Jika kita menambahkan, misalnya, kode di atas dalam lembar gaya kami, kami mungkin tidak melihat apa-apa terjadi khususnya di website kami. Seperti yang telah saya sebutkan di atas, pemilih berkaitan dengan HTML dan CSS sehingga, jika kita ingin kotak untuk mengambil nilai-nilai ini untuk lebar, warna latar belakang, perbatasan dan ukuran font, kita perlu menyertakan pemilih dalam HTML halaman elemen, seperti ini:
<div class = " SelectorName "> Teks disini </ div>
Di sini kita menambahkan aturan memberitahu browser untuk menafsirkan bahwa kotak ini harus menjadi dari jenis tertentu atau kelas . Ini kelas 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 yang lain yang tidak memiliki   nama SelectorName akan mengikuti tampilan standar.

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


Dimana menambahkan style CSS

Gaya ini dapat ditambahkan dalam file CSS eksternal - buat file CSS dengan semua aturan, upload di situs hosting dan dapatkan URL dari file tersebut. Untuk memanfaatkannya, sertakan baris berikut di header template Anda. Untuk Blogger, Anda bisa menambahkannya di 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>
Hal 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; "> Teks disini </ div>
Di Blogger, aturan antara <b: skin> <! [CDATA [/ * dan ]]> </ b: skin> tag kulit. Jika kita mengakses HTML 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 .


Itu cukup untuk hari ini. Dalam tutorial berikutnya kita akan mengenal cara menambahkan sudut dibulatkan ke gambar kami menggunakan CSS -> cara mengatur batas bulat di sekitar gambar menggunakan CSS .