İçeriğe atla
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

Doğuhan ELMA tarafından Frontend'de bir blog

  • makale
    57
  • yorum
    0
  • görüntüleme
    2.234

Bu blogdaki Makaleler

Temel İşlemler

Scrollbar Stil Değiştirme - Tailwind

app.css: @tailwind base; @tailwind components; @tailwind utilities; /* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ ::-webkit-scrollbar-thumb { background: #888; border-radius: 5px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; }    
Doğuhan ELMA

Doğuhan ELMA tarafından Temel İşlemler kategorisinde yayınlandı

0
Temel İşlemler

rotate - Tailwind

HTML: <div class="min-h-screen bg-blue-500 p-8"> <div class="relative mx-auto bg-white rounded-xl shadow-xl h-56 w-80"> <div class="bg-amber-100 w-32 h-32 absolute -top-2 -right-2"> <a class=" absolute bg-amber-300 block origin-bottom-right rotate-45 bottom-0 right-0">elmacademy.net</a> </div> </div> </div>   Açıklama: origin-bottom-right:  origin-bottom-right sınıfı, Tailwind CSS'in dönüşüm
Doğuhan ELMA

Doğuhan ELMA tarafından Temel İşlemler kategorisinde yayınlandı

0
Temel İşlemler

Block - Tailwind

HTML: <div class="min-h-screen bg-blue-500 p-8"> <div class="relative mx-auto bg-white rounded-xl shadow-xl h-56 w-80"> <div class="bg-amber-100 w-32 h-32 absolute -top-2 -right-2"> <a class="bg-amber-300 block ">elmacademy.net</a> </div> </div> </div> Açıklama: Yukarıdaki örnekte, block sınıfı, elementin display: block; stilini uygular. Bu, elementin kendisinden sonra bir sonraki içeriğin yeni bir sat
Doğuhan ELMA

Doğuhan ELMA tarafından Temel İşlemler kategorisinde yayınlandı

0
Temel İşlemler

Relative ve Absolute - Tailwind

HTML: <div class="min-h-screen bg-blue-500 p-8"> <div class="relative mx-auto bg-white rounded-xl shadow-xl h-56 w-80"> <div class="absolute bg-amber-300 w-32 h-32 -top-2 -right-2"></div> </div> </div>   Açıklama: Tailwind CSS'de "absolute" ve "relative", CSS'de pozisyon belirleme için kullanılan iki yaygın değerdir. Bu değerler, öğelerin yerini ve yerleşimini belirlemede kullanılır. Tailwind CSS, bu pozisyon değerlerini hızlı b
Doğuhan ELMA

Doğuhan ELMA tarafından Temel İşlemler kategorisinde yayınlandı

0
Tailwind Plugin

CSS Stripes - Tailwind Plugin

Kayan arkaplan animasyonu... HTML: <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./output.css" rel="stylesheet"> </head> <body> <div class="block grid grid-cols-2 w-[400px] m-8"> <div class="elm-stripes h-20 w-40 m-8"><span class="text-pink-800 font-bold">Default</span></div> <div class="elm-stripes
Doğuhan ELMA

Doğuhan ELMA tarafından Tailwind Plugin kategorisinde yayınlandı

0
Flexbox - Grid

Split Background - Tailwind

HTML <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./output.css" rel="stylesheet"> </head> <body> <div class="grid min-h-screen place-items-center bg-cyan-500"> <div class="fixed inset-0 hidden elm-background-split min-[480px]:grid"> <div class="col-span-2 bg-cyan-600"></div> <div class="col-span-2
Doğuhan ELMA

Doğuhan ELMA tarafından Flexbox - Grid kategorisinde yayınlandı

0
×
×
  • Create New...