Css – İNTERNET ALEMİ https://www.internetalemi.net İnternet, Bilişim, Yazılım Haber ve Günlüğü Fri, 11 Nov 2022 07:23:20 +0000 tr hourly 1 https://wordpress.org/?v=6.9.4 https://www.internetalemi.net/wp-content/uploads/2017/01/cropped-internet-alemi-logo-32x32.png Css – İNTERNET ALEMİ https://www.internetalemi.net 32 32 Laravelde / CSS vb. ile yazı üzerine gelince mesaj gösterme https://www.internetalemi.net/laravelde-css-vb-ile-yazi-uzerine-gelince-mesaj-gosterme/ https://www.internetalemi.net/laravelde-css-vb-ile-yazi-uzerine-gelince-mesaj-gosterme/#respond Fri, 11 Nov 2022 07:23:15 +0000 https://www.internetalemi.net/?p=4959 Aşağıdaki kod yardımı ile veri tabanındaki not alanında veri var ise “notu görüntüle” yazısının üzerine gelindiğinde veri tabanındaki notu kullanıcılara gösterebilirsiniz.

Laravelde / CSS vb. ile yazı üzerine gelince mesaj gösterme yazısı ilk önce İNTERNET ALEMİ üzerinde ortaya çıktı.

]]> Aşağıdaki kod yardımı ile veri tabanındaki not alanında veri var ise “notu görüntüle” yazısının üzerine gelindiğinde veri tabanındaki notu kullanıcılara gösterebilirsiniz.

<div class="tooltip2">
                  @if ($liste->not>0) notu görüntüle
                  <span class="tooltiptext">{{ $liste->notlar }}</span>
                  @endif       
</div>

Laravelde / CSS vb. ile yazı üzerine gelince mesaj gösterme yazısı ilk önce İNTERNET ALEMİ üzerinde ortaya çıktı.

]]> https://www.internetalemi.net/laravelde-css-vb-ile-yazi-uzerine-gelince-mesaj-gosterme/feed/ 0 Gulpjs Kullanımı ve gulpfile.js ile sass render etme https://www.internetalemi.net/gulpjs-kullanimi/ https://www.internetalemi.net/gulpjs-kullanimi/#respond Mon, 10 Jan 2022 13:02:53 +0000 https://www.internetalemi.net/?p=4692 SASS ön işlemcilerinin derlenmesi için bu blog yazımızda Gulpjs kullanacağız. Peki sass veya scss nedir. Eğer programlamanın nimetlerinden css kullanarak yararlanmak istiyorsanız sass kullanabilirsiniz. Yani sitede kullanılan ana rengi bir değişkene atayarak , ilerleyen tarihlerde bu rengi değiştirmek istediğinizde sadece değişkenin değerini kullanarak tüm sitenizin rengini değiştirebilirsiniz. Şimdi gelelim nasıl kullanacağımıza: Node js bilgisayarınızda kurulumu […]

Gulpjs Kullanımı ve gulpfile.js ile sass render etme yazısı ilk önce İNTERNET ALEMİ üzerinde ortaya çıktı.

]]> SASS ön işlemcilerinin derlenmesi için bu blog yazımızda Gulpjs kullanacağız. Peki sass veya scss nedir. Eğer programlamanın nimetlerinden css kullanarak yararlanmak istiyorsanız sass kullanabilirsiniz. Yani sitede kullanılan ana rengi bir değişkene atayarak , ilerleyen tarihlerde bu rengi değiştirmek istediğinizde sadece değişkenin değerini kullanarak tüm sitenizin rengini değiştirebilirsiniz.

Şimdi gelelim nasıl kullanacağımıza:

  • Node js bilgisayarınızda kurulumu ? Kurulu olup olmadığı öğrenmek için node –version komutunu terminalde kullanarak öğrenebilirsiniz. Eğer kurulu değilse https://nodejs.org/en/ linkinden kurma işlemini yapabilirsiniz
  • npm install –global gulp-cli //Terminale yazın
  • Hangi dizine kurmak istiyorsanız işlemi onun içine geçin ve npm init – -y yazin. Bu komut dizininizde package.json dosyasi oluşturacaktır.
  • npm install –save-dev gulp //Terminale yazın Developer olarak package.json dosyasına bağımlılık ekleyecek.
  • Terminale gulp –version yazarak aşağıdaki sonucu görün.

Aşağıdaki gibi Gulpfile.js isminde içi boş bir dosya oluşturun. Sass isminde bir klasor ve içine iki tane boş scss uzantılı dosya oluşturun (index.scss ve main.scss)

Gulpfile.js isminde içi boş bir dosya oluşturun. Bu dosyanın içine aşağıdaki kod satırlarını yapıştırın.

7.satırda anlatılan sass klasörünüzün altındaki bütün scss uzantılı dosyaları 9. satırda css klasörünüzün altına css uzantılı olarak render eder. Sizin ekstradan css klasörü oluşturmanıza gerek kalmaz. İlk render ettiğinizde otomatik olarak oluşturur. Render etmek için gulp buildStyles komutunu terminale yazmanız lazım.

Gulp Watch Nedir

14. satırda gulp.watch komutuyla da sass klasorunuzun altındaki scss uzantılı dosyaları her kaydettiğinizde otomatık render işlemi yapmak içindir. Böylece sass dosyasındaki css kodu değişikliğinde tekrar tekrar render render etmek zorunda kalmazsınız. CAlıstırmak için terminalde gulp watch yazın.

Aşağıda index.scss dosyasını değiştirdiğimizde sağdaki render edilen index.css otomatik değişir. Gulp wacht işlemi aktif olduğu için sadece kaydetmemiz yeterlidir.

Umarım faydalı olmuştur.

Gulpjs Kullanımı ve gulpfile.js ile sass render etme yazısı ilk önce İNTERNET ALEMİ üzerinde ortaya çıktı.

]]> https://www.internetalemi.net/gulpjs-kullanimi/feed/ 0 CSS ile büyük, küçük harf, Başlangıcı büyütme kodları https://www.internetalemi.net/css-ile-buyuk-kucuk-harf-baslangici-buyutme-kodlari/ https://www.internetalemi.net/css-ile-buyuk-kucuk-harf-baslangici-buyutme-kodlari/#respond Fri, 26 May 2017 07:25:16 +0000 http://www.internetalemi.net/?p=3500 CSS ile büyük, küçük harf, Başlangıcı büyütme kodları text-transform: lowercase; /* Hepsi küçük harf */  text-transform: uppercase; /* Hepsi büyük harf  */  text-transform: capitalize; /* İlk harfler büyük */ Örnek Yazı : Merhaba DÜNya <span style="text-transform: lowercase;">Merhaba DÜNya</span> Sonuç : merhaba dünya <span style="text-transform:uppercase;">Merhaba DÜNya</span> Sonuç : MERHABA DÜNYA <span style="text-transform:capitalize;">Merhaba DÜNya</span> Sonuç : Merhaba Dünya

CSS ile büyük, küçük harf, Başlangıcı büyütme kodları yazısı ilk önce İNTERNET ALEMİ üzerinde ortaya çıktı.

]]> CSS ile büyük, küçük harf, Başlangıcı büyütme kodları 
text-transform: lowercase; /* Hepsi küçük harf */
 text-transform: uppercase; /* Hepsi büyük harf  */
 text-transform: capitalize; /* İlk harfler büyük */

Örnek Yazı : Merhaba DÜNya
<span style="text-transform: lowercase;">Merhaba DÜNya</span>

Sonuç : merhaba dünya
<span style="text-transform:uppercase;">Merhaba DÜNya</span>


Sonuç : MERHABA DÜNYA
<span style="text-transform:capitalize;">Merhaba DÜNya</span>
Sonuç : Merhaba Dünya

CSS ile büyük, küçük harf, Başlangıcı büyütme kodları yazısı ilk önce İNTERNET ALEMİ üzerinde ortaya çıktı.

]]> https://www.internetalemi.net/css-ile-buyuk-kucuk-harf-baslangici-buyutme-kodlari/feed/ 0 Resimlerde Lightbox Kullanımı https://www.internetalemi.net/resimlerde-lightbox-kullanimi/ https://www.internetalemi.net/resimlerde-lightbox-kullanimi/#respond Tue, 18 Apr 2017 05:42:39 +0000 http://www.internetalemi.net/?p=3472 Resimlerde Lightbox Kullanımı Resimlere verilen linklerin sayfa içerisinde arkası gölgeli şekilde açılmasını sağlamak için aşağıdaki işlemleri uygulayabilirsiniz. Öncelikle buradan ilgili css ve js dosyalarını buradan indirelim. <head></head> etiketleri arasına ; <link href=“css/lightbox.css” rel=“stylesheet”> <script src=“js/lightbox.js”></script> satırlarını ekleyelim. Bu arada sayfanızda eğer jquery kullanmıyorsanız aşağıdaki satırı da eklemelisiniz. <script src=“lightbox-plus-jquery.js“></script> Gerisi html kodlarına kalıyor. Burada 2 […]

Resimlerde Lightbox Kullanımı yazısı ilk önce İNTERNET ALEMİ üzerinde ortaya çıktı.

]]> Resimlerde Lightbox Kullanımı

Resimlere verilen linklerin sayfa içerisinde arkası gölgeli şekilde açılmasını sağlamak için aşağıdaki işlemleri uygulayabilirsiniz.

Öncelikle buradan ilgili css ve js dosyalarını buradan indirelim.

<head></head> etiketleri arasına ;

<link href=“css/lightbox.css” rel=“stylesheet”>
<script src=“js/lightbox.js”></script>

satırlarını ekleyelim. Bu arada sayfanızda eğer jquery kullanmıyorsanız aşağıdaki satırı da eklemelisiniz.

<script src=“lightbox-plus-jquery.js“></script>

Gerisi html kodlarına kalıyor. Burada 2 örneğimiz var. Birincisinde her link ayrı ayrı açılıyor. İkincisinde ise herhangi bir resme tıkladığınızda resimler arasında ileri geri gidebileceğiniz bir formatta açılıyor.

Birinci Örneğimiz;

<a href="images/Resim1.jpg" data-lightbox="r1" data-title="Başlığımız"><img src="images/Resim1.jpg"></a>


İkinci Örneğimiz;

<a href="images/Resim1.jpg" data-lightbox="Galeri1"><img src="images/Resim1.jpg"></a>
<a href="images/Resim2.jpg" data-lightbox="Galeri1"><img src="images/Resim2.jpg"></a>

data-lightbox Galeri1 olarak verilen tüm resimler tek bir galeri olarak gözükmektedir.
Birden fazla galeri oluşturabilirsiniz.

kolay gelsin.

Detaylı bilgi için buradan

Resimlerde Lightbox Kullanımı yazısı ilk önce İNTERNET ALEMİ üzerinde ortaya çıktı.

]]> https://www.internetalemi.net/resimlerde-lightbox-kullanimi/feed/ 0 Css ile sitenizin sağ üstüne Sosyal Medya İkonları Vb. İçin div açmak https://www.internetalemi.net/css-ile-sitenizin-sag-ustune-sosyal-medya-ikonlari-vb-icin-div-acmak/ https://www.internetalemi.net/css-ile-sitenizin-sag-ustune-sosyal-medya-ikonlari-vb-icin-div-acmak/#respond Thu, 16 Mar 2017 21:16:21 +0000 http://www.internetalemi.net/?p=3435 Css ile sitenizin sağ üstüne Sosyal Medya İkonları Vb. İçin Div-Kutu açmak Html ve Css Kodları : <div style=”position: absolute;right:0;top:0;padding-right:25px;”> <–! position değeri fixed yapılırsa sayfa aşağı kaysa da kutu sabit kalır –> <a href=”#”><img src=”facebook.png” /></a> <a href=”#”><img src=”instagram.png” /></a> <a href=”#”><img src=”twitter.png” /></a> <a href=”#”><img src=”youtube.png” /></a> </div>

Css ile sitenizin sağ üstüne Sosyal Medya İkonları Vb. İçin div açmak yazısı ilk önce İNTERNET ALEMİ üzerinde ortaya çıktı.

]]> Css ile sitenizin sağ üstüne
Sosyal Medya İkonları Vb. İçin Div-Kutu açmak

Html ve Css Kodları :

<div style=”position: absolute;right:0;top:0;padding-right:25px;”>

<–! position değeri fixed yapılırsa sayfa aşağı kaysa da kutu sabit kalır –>

<a href=”#”><img src=”facebook.png” /></a>
<a href=”#”><img src=”instagram.png” /></a>
<a href=”#”><img src=”twitter.png” /></a>
<a href=”#”><img src=”youtube.png” /></a>
</div>

Css ile sitenizin sağ üstüne Sosyal Medya İkonları Vb. İçin div açmak yazısı ilk önce İNTERNET ALEMİ üzerinde ortaya çıktı.

]]> https://www.internetalemi.net/css-ile-sitenizin-sag-ustune-sosyal-medya-ikonlari-vb-icin-div-acmak/feed/ 0 Css İle Yazıyı Çizgilerin Arasına Alma https://www.internetalemi.net/css-ile-yaziyi-cizgilerin-arasina-alma/ https://www.internetalemi.net/css-ile-yaziyi-cizgilerin-arasina-alma/#respond Thu, 16 Mar 2017 21:00:57 +0000 http://www.internetalemi.net/?p=3430 Css İle Yazıyı Çizgilerin Arasına Alma HTML Kodları : <h1>İnternet Alemi</h1> <h1>www.internetalemi.net Adresi</h1> CSS Kodları : h1 { overflow: hidden; text-align: center; } h1:before, h1:after { background-color: #000; content: “”; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } h1:before { right: 0.5em; margin-left: -50%; } h1:after { left: 0.5em; margin-right: -50%; }

Css İle Yazıyı Çizgilerin Arasına Alma yazısı ilk önce İNTERNET ALEMİ üzerinde ortaya çıktı.

]]> Css İle Yazıyı Çizgilerin Arasına Alma

HTML Kodları :

<h1>İnternet Alemi</h1>
<h1>www.internetalemi.net Adresi</h1>

CSS Kodları :

h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: “”;
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
}

Css İle Yazıyı Çizgilerin Arasına Alma yazısı ilk önce İNTERNET ALEMİ üzerinde ortaya çıktı.

]]> https://www.internetalemi.net/css-ile-yaziyi-cizgilerin-arasina-alma/feed/ 0