Nagłówki w CSS

pytanie zadane 18 kwietnia 2015 w HTML i CSS przez supersmok25 Użytkownik (510 p.)

Witam Serdecznie

Czy ktoś może wie jak uzyskać taki o to efekty nagłówków?

Z góry dziękuję za każdą odpowiedź :)

3 odpowiedzi

odpowiedź 18 kwietnia 2015 przez HaKIM Szeryf (87,590 p.)
wybrane 18 kwietnia 2015 przez supersmok25

Najlepsza

Po prostu:

<h1 style="color: #000;">Jakis test</h1>

<h2 stylye="color: #000"><b>Jakis test</b></h2>

<h3 style="font-weight: bold; color: #000;">Jakis tekst</h3>

Jeśli chodzi o podkreślenie to:

<h2 style="border-bottom: 1px solid #000;">Jakis tekst</h2>

Wygląd również zależy od czcionki.

Kolory: http://www.colorpicker.com/.

Czcionki: http://www.google.com/fonts.

A jeżeli chodzi o podzielenie tego, takimi kreskami to:

<h1>Jakis Tekst</h1>
<hr>
    <h3>Jakis tekst</h3>
</hr>
<hr>
    <h3>Jakis tekst</h3>
</hr>

komentarz 18 kwietnia 2015 przez niezalogowany

W html nie używa się styli.

komentarz 18 kwietnia 2015 przez HaKIM Szeryf (87,590 p.)

Dałem to dlatego, że tak jest prościej...

Zamiast pisać

W css:

.cos{

Font-weight: bold

}

W html:

<h3 class="cos">tekst</h3>

Dziwie się że na to nie wpadłeś...

komentarz 18 kwietnia 2015 przez supersmok25 Użytkownik (510 p.)

Zrobiłem to według wskazwówek, ale to nie jest wraz to. Bo po pierwsze to cały czas będzie miało różną długość zależnie od tekstu, a po drugie nie łaczy się to z hr.

komentarz 18 kwietnia 2015 przez HaKIM Szeryf (87,590 p.)

Dobra. Zaraz dam Ci na to kod w css... Sekunda. : p

komentarz 18 kwietnia 2015 przez HaKIM Szeryf (87,590 p.)

W Html:

<div class="wielkie-cos">
	<div class="srednie-cos"><h2>Jakiś Tytuł</h2></div>
		<div class="male-cos">Male cos</div>
		<div class="male-cos">Male</div>
		<div class="male-cos">Male</div>
</div>

W css:

.wielkie-cos{
	width: 500px;
	height: 500px;

	margin-left: 5%;

	border: 2px;
	padding: 10px;
	border: 1px solid #000;
	background-color: #D6D6D6;
}

.srednie-cos{
	height: 90px;
	border-bottom: 1px solid #000;
	background-color: #E6E6E6;
}

.male-cos{
	height: 70px;
	border-bottom: 1px solid #000;
	background-color: #E6E6E6;
}

UWAGA! Nie jest to efekt ładny, ma być podobny. Pobaw się paddingiem, kolorami itp. i będziesz miał to samo. Dałem tylko przykład...

komentarz 18 kwietnia 2015 przez supersmok25 Użytkownik (510 p.)

Ja zrobiłem to tak. Chyba najłatwiejszy sposób.

W css:

h3 {
    border-bottom: 4px solid black;
}

h3 span:after {
    content: '';
    width: 100px;
    border-bottom: 4px solid aqua;
    position: absolute;
    margin-top:26px;
    margin-left: -100px;
}

W html:

        <h3><span>Jakis tekst</span></h3>

        <h3>Jakis tekst</h3>

Efekt wyszedł taki.

komentarz 18 kwietnia 2015 przez HaKIM Szeryf (87,590 p.)

Jak kto woli. : p

odpowiedź 18 kwietnia 2015 przez niezalogowany

odpowiedź 18 kwietnia 2015 przez testerius Pasjonat (23,960 p.)

Trochę późno, ale gdybyś był zainteresowany odtworzeniem podobnego stylu czy coś: http://codepen.io/testerius/pen/qdWXqO - może się przyda. :P

komentarz 18 kwietnia 2015 przez supersmok25 Użytkownik (510 p.)

Dziękuję bardzo :) I na pewno się przyda, zawszę wolę mieć parę rozwiązan i z niego wybrać to najlepsze.

komentarz 18 kwietnia 2015 przez testerius Pasjonat (23,960 p.)

No spoko, jeśli ci się przyda to będę uradowany.

komentarz 20 kwietnia 2015 przez testerius Pasjonat (23,960 p.)

Heh teraz, gdy sprawdzam na innym komputerze to zauważyłem, że nagłówki mają podkreślenie na cały tekst, wcześniej jakoś tego nie zauważyłem ze względu na bardzo jasny kolor. :P