Motivasyon
HTML ve CSS kullanarak Card oluşturuyoruz.
Bir resmin insan üzerindeki etkileri.
“Bakarsan bağ, bakmazsan dağ.”
Bugün bir görsel ile karşılaştım ve bu görselin bana düşündürdüklerinden ve yaptırdıklarından kısaca bahsetmek istiyorum.
Öncelikle görseli paylaşmak istiyorum. İşte aşağıda gördüğünüz bu görsel bazılarınız için bir şey anlam ifade edecek bazılarınız ise tam olarak anlamayacak.
Bu görsel gün içerisinde karşıma facebook akışında çıktı. Görseli inceleyerek öğrenebileceğiniz bir bilgi vereyim. Görsel 3g yani üç gün önce takip etmediğim bir sayfadan ilgi, alakam dahilindedir diye önüme çıkartıldı facebook tarafından.
Facebook ya da Instagram hatta twitter bu karşınıza çıkartma olayını sık sık yapar. Özellikle takip ettiğiniz sayfaların gün içerisindeki gönderilerini tükkettiyseniz size reklam olarak ya da bu görsel gibi alakalı olduğunuzu düşünerek sayfalar önenrir. İşte buda onlardan biri.
İlgi alakam ve takip ettiğim içerikler kodlama, tasarım gibi başlıkları içerince facebookta sağolsun bu gönderiyi önüme çıkardı.
Hadi artık sadede gel!
Görsel bazılarınız için güzel bir çalışma bazılarınız için anlam ifade etmeyen yazılardan ve bir görselden oluşabilir. Ama bir front-end geçmişiniz, işiniz varsa, kodlamayla alakalıysanız ya da grafik tasarım işleri yapıyorsanız işin tekniğine, detayına, oluruna bakabilirsiniz.
Bende tanıdık kodları ve göze hoş gelebilcek cam efektini ya da buzlanma efektini ya da buğulanma efektini ya da koddan da yola çıkarak bulur olayını görünce ufak detayların kullanıcıya ne kadar hoş görünebileceği düşüncesi ile hoşlaştım.
Görselin paylaşılma amacı “Bakın ne kada da güzel bir olay, iki satır kod ile bu güzelim cıncık gibi görüntü olayını elde debilirsiniz” dalaverisini pazarlamak.
Ne kadar kolay geliyor değilmi? Kodlamaya merakı olan ya da bir şeyler tasarlamaya merakı olan bir insanı teşvik eden bir içerik. Kısa, öz ve çekici.
“Heyy hadi ne duruyorsun, bak o kadar da zor değil. Bununla bunu yapabilirsin.”
Bu ve buna benzer pek çok örnek kodlama dünyasında mevcuttur. Yeni bir dile başlamadan önce o dilin sayfasına ya da dökümanlarına ya da topluluk gruplarına baksanız veya internetten bir kaç görsele baksanız size en kısasında o dille alakalı şu örneği verebilirler.
“Haydi bu dille ekrana nasıl ‘Hello World’ yazdırılır ona bakalım”. Bu işlemide işte Java da şu şekil, JavaScript’te bu şekil, Pythonda da o şekil diyerek kıyas yaparlar ve “Bakııın işte en az satırı Pythonla yazdık. Hadi gelin bu dili öğrenmeye başlayın, bakın çoook kolay” dalaveresi.
İşte bu resimde onlardan biri.
Evet banada öyle geldi. Yani kolay geldi. Yani zaten işten anlıyordum. Ekstra kütüphanelere gerek kalmadan iki satırla yazılabilirdi bu görseldeki olay.
Resim beni bu işi yapmam için motive etti. Kolay, göze hoş geliyor ve şuanda ne yapıyordum ki ve bunu yapmak ne kadarımı alırdı ki? Hadi ne duruyorum hemen bunu yazmalıyım diye düşündüm. Ayrıca zaten işin önemli parçasını görselde veriyordu. Aynısını yazarsam aynı şeyi bende elde edebilirim. Değil mi yani öyle oluyor değil mi? Ha cevap versenee!
Elimizde neler var? Resim yok, resimin içeriğindeki yazı yok, kod parçası sadece bize cam efektini veren kısımın renginden ve saydamlık değerinden bahsetmiş ve birde cam alandaki arkaplanı ne kadar bulanıklaştırdığına dair orandan.
Peki bu kod nasıl çalışıyor? Nereye yazacağım bu kodu ben? Resim, yazı? Tam olarak hangi dil de diyebilirsiniz. “.song-info” da ne kardeşim?
Hadi şimdi bu kodu yani bu görseli oluşturmayı birde biz deneyelim.
Yukardaki göseli bir web sayfasında çalışacak şekilde yazalım. Görseldeki kodda bize kısmen bunu söylüyor. Yani tabi farklı platformlarda da çalıştırabileceğiniz durumlar var tabide uzataamaaay…
Görseldeki kod CSS. Hemmen bir CSS Nedir? soralım.
Peki bu CSS nerede çalışır? Kendi stil dosyasında ya da daha hızılısından ve az öz işlerde direkt HTML kodunun içerisinde çalışabilir. Hemen hızlısından HTML Nedir?
Evet buraya kadar CSS ve HTML hakkında kısa bilgiler edindik. Şimdi de işe dönelim. Öncelikle bir HTML kodunu çalıştıracağımız yani yazacağımız sayfamızı oluşturalım.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS/Card - Osman Esad</title>#1</head>
<body>#2</body>
</html>
Yukarıda yazılmış olan kodu herhangi bir not defterine “index.html” şeklinde kaydederseniz bir web sayfası şeklinde açılabilir dosyanız oluşur. Dikkat ediyoruz, dosya uzantımız “.html”. Görmüş olduğunuz kodlar ise temel bir HTML başlangıç kod satırlarıdır. Açılış hamlesi diyebiliriz. Standarttır.
#1 Belirttiğim alana ve #2 numaralı alana yukardaki görselin bir benzerini yapabilmemiz için gerekli olan kodları yazacağız.
Şimdi hızlıca şu satırları #2 numaralı alana ekleyelim.
<div class="image"><div class="ice"><p style="padding-left: 10px;"><b>Bakarsan bağ, bakmazsan dağ.</b><br />Yeşili koru, doğayı sev.</p></div>
Yukarıdaki kodlarda ekrana kutu içerisinde kutu oluştrabilecek “<div>” taglarını ve bu kutulardan birinin içerisinede özlü sözümüzü ekrana göstereceğimiz “<p>” tagını ekledim. Buradaki “<p>, <b>, <br>, <div> gibi tagları yukarıda yaptığımız gibi Google ile hızlıca öğrenebilirsiniz. İşi az buçuk bilenler için detaylandırmıyorum. Ama kutu-alan oluşturma ve paragraf açma gibi hızlıca yorumlayabilirsiniz.
Bu tagların içerisinde birde tanımlar var. Bu tanımlar bize kutularımızın ve paragrafımızın özelliklerini çağıran ya da veren değerler.
Özelliklerimizi yani görsel farkları kazandıracağımız kodlarımızı ise #1 numaralı alana ekliyoruz.
<style>.ice {background-color: rgba(0, 0, 0, 0.192);
backdrop-filter: blur(8px);height: 80px;
width: 250px;
position: absolute;
top: 280px;
border-radius: 0px 0px 20px 20px;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
color: rgb(255, 255, 255);}.image {height: 250px;
width: 250px;
background-image: url("nature.jpg");
background-size: cover;
border-radius: 20px;}div {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}</style>
Yukarıda ki kodlarda ise az önce bahsettiğim gibi görsel özellikler verdiğimiz tanımlamaları içeren satırları görüyorsunuz. İşte bu kısım CSS.
Stil verdiğimiz bu kısımı <style></style> tagları arasında yazıyoruz. Kodu incelediğinizde aslında çoğunu anlıyacaksınız. Dili ingilizce. Biraz ingilizce varsa, kodun ne demek istediği açıkça ortada.
Dikkatinizi çekti mi? Bize ilham kaynağı olan görselde “.song-info” süslü parantezi içerisinde verilen iki satırlık kod, bizim “.ice” tanımlamamızın ilk iki satırında yer alıyor.
Bu tanımlaya istediğiniz ismi verin. Buz olur, cam olur, mozaik olur. Ne isterseniz, ama dikkat etmeniz gereken #2 numaralı alanda ki kutulara ve diğer tagların içerisinde de aynı tanımı vermeniz. Yoksa stil alanında oluşturduğumuz özellikleri çağıramaz ve ekranda istediğimiz sonucu alamayız.
Şimdi kodu bir bütün halinde görelim ve inceleyelim.
Yukarıda bize ilham olan görselden yola çıkarak “Bende bunu yaparım, Hadi yapaılm” gibi gaza gelemeler ile oluşturduğumuz kodu görüyoruz.
İki satırla işin bitmediğinide görüyoruz.
Peki bu “index.html” dosyasını bir klasörün içerisine kaydedelim. Birde ihtiyacımız olan bir görseli de yanına koyalım. Ben bu kod için bir görsel kullandım. Kod içerisinde “nature.jpg” olarak görebilirsiniz. Ayrıca kaynak dosyalarına GitHub hesabımdan ulaşabilirsiniz.
Uzatmadan kodu çalıştıralım ve neler yapmışız görelim. İŞTEEE…
Nereden nereye? Bize ilham olan, bizi heyecanlandıran, gaza getiren, motive eden şeylerin nerede ve ne zaman karşımıza çıkacağını ve bizi nerelere götürebileceğini kestiremeyiz.
Bugün o görseli görmesem belkide kendimi kod yazmaya teşvik edecek motivasyonu bulamıyacaktım. Bulamadığım gibi ardından gelen bu yazıyı yazma gibi bir durumda olamaycaktı.
Bana ilham olan, beni motive eden şey belki bu yazıdan sonra sizi daha farklı yollara sürükleyecek, nerden bilebiliriz ki?
Kendinizi geliştirmeye, öğrenmeye ve birşeyler yapmaya motive edecek yollarda bulmanız dileğiyle.
Esenlikle kalın.