CSS resize Özelliği

CSS resize

Örnek:

Bu örnekteki div elementinin sağ alt köşesindeki simgeye mouse ile basılı tutarak hareket ettiriniz.Kutunun boyutunu istediğiniz gibi hem yatayda hemde düşey eksende değiştirebilirsiniz.

div { border: 1px solid black; width: 250px; resize: both; overflow: auto; }

CSS resize nedir nasıl kullanılır

Css resize özelliği ile kullanıcılar için html elementlerinin boyutları değiştirilebilir hale getirilebilir.
CSS resize CSS resize özellikleri  
Varsayılan Değer: none  
Kalıtsallık: yok  
Animasyon Özelliği: yok  
Versiyon: CSS3  
JavaScript resize: object.style.resize="horizantal"

CSS resize Tarayıcı Desteği

Tablodaki sayılar özelliği ilk destekleyen tarayıcı versiyonlarını göstermektedir.

CSS Kodu:
resize 4.0 Desteklenmiyor 5.0
4.0 -moz-		 4.0 15.0

CSS resize Değerleri

resize: none|both|horizontal|vertical|initial|inherit;

CSS resize özelliği değerleri

CSS resize değerleri CSS resize değerleri tanımları CSS örnek uygulamalar
none Kullanıcı için boyut değiştirilme özelliği yoktur.
both Her iki doğrultuda kullancı elementin genişliğini ve boyunu değiştirebilir.
horizontal Sadece yatay eksende elementin boyutu değişebilir.
vertical Sadece düşey eksende elementin boyu değişebilir.
initial Özelliğin varsayılan değeridir.
inherit Kalıtsal olarak aldığı değerdir.  

Yorumlar

Yorum Gönderme

Popüler yayınlar

CSS content Özelliği

CSS content Css content özelliğini sayfaya seçilen elemandan önce veya sonrasında içerik eklemek için kullanılabilir. Örnek: Bu örnekte bir linkin title değerini linkten önce yazmak için content özelliği uygulanmıştır. a:before { content: " (" attr(title) ")"; color: red; font-size: 1.1em; } Kendiniz deneyin » CSS content nedir nasıl kullanılır Css content ile seçilen html elemanından önce veya sonrasında bir url ,resim, içerik, tırnak işareti gibi elemanlar eklenebilir. CSS content CSS content özellikleri   Varsayılan Değer: normal   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS2   JavaScript content: Açıklama Oynat CSS content Tarayıcı Desteği Tablodaki sayılar özelliği tam destekleyen ilk tarayıcı sürümlerini gösterir. CSS Kodu:
Devamı

CSS justify-content Özelliği

CSS justify-content Css justify-content özelliğini esnek kutu modelinde kapsayıcı kutunun elemanlarının genişliği kabı doldurmadığında değişik hizalama seçenekleri sunar. Örnek: Bu örnekte bir esnek kutu içerisinde genişlikleri kabı doldurmayan elemanlar vardır.Kapsayici kutuya justify-content özelliğinin space-between değeri verildiğindeki etkisini görmek için aşağıdaki kendiniz deneyin tuşuna tıklayınız. #anakutu { width: 300px; height: 250px; border: 2px solid black; display: -webkit-flex; -webkit-justify-content: space-between; display: flex; justify-content: space-between; } #anakutu div { width: 50px; height: 50px; } Kendiniz deneyin » CSS justify-content nedir nasıl kullanılır Esnek kutu içerisindeki elemanlar yatay eksende tüm genişliği kaplamadığı zaman justify-content özelliği elemanları hizalamak için kullanılabilir. CSS justify-content CSS justify-content özellikleri
Devamı

CSS top Özelliği

CSS top Css top özelliği ile durağan halde bulunmayan html elementlerinin konumları düzenlenebilir. Örnek: Bu örnekte kapsayıcısı içinde bulunan küçük kutu büyük kutuya göre 150px uzaklıktadır. div.relative { position: relative; width: 250px; height: 280px; border: 2px solid yellow; } div.absolute { position: absolute; top: 150px; width: 100px; height: 100px; border: 2px solid blue; } Kendiniz deneyin » CSS top nedir nasıl kullanılır Css top özelliğini kullanırken dikkat edilmesi gereken elementin position değeridir.Bu değer varsayılan olarak relative dir.Yani eleman durağan haldedir.Top değeri girilse bile eleman konum değiştirmez. CSS top CSS top özellikleri &nbsp Varsayılan Değer: auto   Kalıtsallık: yok   Animasyon Özelliği: var Oynat Versiyon: CSS2   JavaScript t
Devamı

HTML strong Etiketi

<strong> Etiketi Örnek Belgede metni biçimlendirme: < strong > önemli metin < /strong > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html><html> <body> <em>Vurgulanmış metin</em> <br /> <strong>Önemli metin</strong> <br /> <code>Bilgisayar kodları</code> <br /> <samp>Bir bilgisayar programının örnek çıktısı</samp> <br /> <kbd>Klavye girişi</kbd> <br /> <var>Değişkenler (Variables)</var> </body> </html> HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <strong> Tanımı ve Ku
Devamı

Javascript ile neler yapılabilir

Resim
Javascripti web prokelerimizde hangi amaçlarla nasıl kullanabileceğimizi ve javascript ile neler yapılabilir bu yazımda bunları anlatmaya çalışacağım.Javascript  kullancı taraflı bir dildir.Öğrenilmesi en kolay  web programlama dilidir.Ve bir webmasterın öğrenmesi gereken temel 3 dilden biridir.Bu diller:Html,Css ve Javascripttir. Javascript ile neler yapılır Javascript HTML elemanlarının içeriğini değiştirebilir.Aşağıda uygulmada p1 id'ye sahip bir paragrafı Js ile içeriğini değiştirebilirsiniz.Bunun için yapmanız gereken tek şey Butonu çalıştırmak.Javascript kodlarını head kısmında da kullanabiliriz ben daha çok body etiketinden önce kullanıyorum. Javascript ile Html elemanlarının içeriğini değiştirme <!DOCTYPE HTML> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Js ile html belgesindeki bir elemanın içeriğini değiştirme.</title> </head> <body> <p id="p1">Bu paragr
Devamı

Kriptopara nasıl alınır ve nereden alınır?

Resim
Kripto para nedir? Kripto paralar nasıl alınır ve nasıl satılır? Türkiye'nin yasal tek kripto para borsası BINANCETR Bugünkü yazımızda son yıllarda üzerine yoğun bir rağbet ve yatırımın olduğu kripto paralar ile ilgili kripto para nedir? kripto para nasıl alınır? kripto para nasıl satılır? sorularına cevap arayacağız. Kripto paralara son yıllarda, özellikle de son dönemde yoğun bir ilgi var. Bu yoğun ilginin başını elbette Bitcoin (BTC) çekiyor. Tüm dünyayı kasıp kavuran ve çok muhtemelen de milyonlarca insanın al-sat işlemleri yaptığı kripto paralardan kazanç sağlaması, henüz internet kullanıcılarının büyük bir çoğunluğunun kripto para borsası hakkında yeterli bilgiye sahip olmaması sebebiyle tam olarak anlaşılabilmiş değildir.  Kripto para borsası terimine henüz yabancı olanlar, konu hakkında fazla bilgi sahibi olmayanlar ise doğal olarak Kripto para nedir? Kripto paralar nasıl alınır ve nasıl satılır sorularına cevap arıyorlar.  Bu içeriği paylaşmamızın nedeni bu sorulara c
Devamı

Javascript Oyun Yapma Dersleri HTML5+CSS3

Resim
Javascript ile oyun nasıl yapılır,   oyun nasıl programlanır   öğrenmek ister misin  ? Javascript class yapısı kullanarak nesne yönelimli modern kod yazımları  ile  sen de  kendi oyununu çok kolay programlayabilirsin   ve algoritma yeteneğin çok iyi gelişecek. Algoritma demişken matematik biraz sıkıntı çıkarır diyorsanız İkizHocalar Youtube Kanalıma sizi davet ediyorum abone olmayı unutmayın ama :) Sıfırdan matematik dersleri anlatıyoruz. Javascript ile Oyun Nasıl Yapılır Javascript ile oyun yapabilmek için öncelikle HTML5 öğrenmemiş olmamız gerekir.Haliyle uygulamamızın ve oyunumuzu güzel tasarlamak içinde CSS'i çok iyi bilmeliyiz. Eğer yok  diyorsanız  hemen HTML5 ve CSS3 Video Derslerini hemen izleyin .Ya da aşağıdaki resme tıklayarak videoların tamamına ulaşın öğrenin gelin . Ben bekliyorum :) Javascript ile Oyun Yapma Çok Kolay Javascript ile oyun geliştirirken  bir oyun kütüphanesi kullanmak zorunda değiliz.Ben oyun geliştirirken  HTML5 Canvas etiketi ni (tagını)
Devamı

Ücretsiz Bitcoin Kazan Pasif Gelir Elde Et İnternetten Para Kazan

Resim
  İnternetten para kazanmanın yolları ile ilgili yazılar paylaşmaya devam edeceğim. Sizler de internetten gelir elde etmek istiyorsanız yazılarımı takip ederek internetten para kazandıran siteler ve uygular ile hızlı ve kolay para kazan abilirsiniz. Harika Bir pasif gelir elde et Uyurken Bile Para Kazan Ücretsiz bitcoin kazan dıran bu harika sitenin ayrıca referans sistemi var. Üye olduğunuzda Refer(sayfasına gidip kendi linkinizi heryerde paylaşın ve para kazanmaya hemen başlayın.) Arkadaşlarınızı da üye yaparak  pasif gelir elde edebilirsiniz . Genelde uyurken bile para kazan   denildiğinde anlamanız gereken bu sistemdir. Haydi Ücretsiz Bitcin kazanmaya başlayalım ve paraya dönüştürelim. Siteye Hemen Üye ol: FreeBitcoin  ( tıkla ) Ücretsiz Bitcoin Kazandıran siteye hemen üye ol (arkadaşlarınla paylaş) uyurken bile para kazan Her saat bitcoin kazanabilirsin ( Şanslı isen 200 Dolar değerinde Bitcoin ) Kazandığın her bitcoinle ücretsiz  çekiliş bileti alabilirsiniz. Dikkatle oku
Devamı

HTML5 Canvas Oyun Yapımı Dersleri

Resim
Html5 canvas etiketi ve Javascript ile nasıl oyun yapılır ? Web oyunu geliştirme ve animasyon teknikleri nelerdir ? Javascript'te yılan oyunu nasıl yapılır ? Siz de kendi canvas oyununuzu geliştirmek istiyorsanız önce videoyu izleyelim . Html5 Canvas oyun yapımı ve Javascript Animasyon Dersleri  Bir web geliştiricisi ya da yazılımla uğraşıyorsanız eminim oyun yapımı ya da oyun programlama ve geliştirme ile ilgili mutlaka bir deneyiminiz  olmuştur.İşte oyun programlama ve Html5 canvas animasyon derslerimizden görüntüler.Bakalım beğenecek misiniz ? İyi seyirler.  "Bu yılan  başka yılan :)" Javascript ile kendi oyununu geliştirmeye hazır mısın ? 6 saatlik dolu dolu uygulamalı Canvas Oyun Yapımı kursuna sadece 24.99TL ye hemen kayıt yaptırabilirsiniz.Harika eğlenceli ve bilgi dolu kursu bitirip  yılan oyunu ile kendinizi ödüllendirin. Kursu içeriğini incelemek için Udemy HTML5 Canvas Animasyon Dersleri ve Javascript Oyun Yapımı   linkine tıklayın. Html5 canvas
Devamı

CSS align-self özelliği

CSS align-self özelliği Css align-self özelliği ile bir esnek kutu içerisindeki seçtiğimiz elamanı istenilen değere göre hizalayabiliriz.. Örnek: Bu örneğimizde flex özelliği taşıyan kutu içindeki id'si"kırmızı" olan elemanı align-self özelliğinin center değeri ile merkezde hizalanacaktır. #kirmizi { -webkit-align-self: center; align-self: center; } Kendiniz deneyin » CSS align-self nedir nasıl kullanılır flex kutu modeli ile çalışılırken kapsayıcı bir elemanın içindeki elemanlardan seçilenleri hizalamak için kullanılır. CSS align-self CSS align-self özellikleri   Varsayılan Değer: auto   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS3   JavaScript align-self: object.style.alignSelf="stretch" Oynat CSS align-self Tarayıcı Desteği CSS K
Devamı