• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Lekkie zaokrąglenie/usunięcie rogów prostokąta w kole

VPS Starter Arubacloud
0 głosów
233 wizyt
pytanie zadane 6 czerwca 2016 w HTML i CSS przez rucin96 Użytkownik (500 p.)

Siemka.

Borykam się z małym problemem. Mianowicie mam obecnie taki efekt.

Kod HTML

<div class="col-lg-4 works">
	<div class="work">
		<img src="http://placehold.it/350x350/FF0000/FFF" alt="image" />
		<p class="img-title">Counstuction works</p>
	</div>
	<p>Woodwork, sanded or clean everything inside of building is no problem for us.</p>
	<a href="#">Read More</a>
	<div style="clear:both;"></div>
</div>

Kod CSS

.works {
	padding: 20px 0;
}

.works p {
	font-size: 18px;
	color: #0e1015;
	padding-top:20px;
	max-width: 350px;
	margin: 0 auto;
}

.work {
	position: relative; 
	max-width: 215px;	
	border-radius: 50%;
	margin: 0 auto;
}

.work img { 
   position: relative; 
   width: 100%; /* for IE 6 */
   border-radius: 50%;
}

.work p.img-title {
	position: absolute; 
	top: 50%; 
	left: 0; 
	width: 100%; 
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	margin: -24px 0;
	padding: 14px;
}

.works a:link, .works a:hover {
	font-style: italic;
	font-size: 18px;
	font-weight: 300;
	color: #6d7075;
}

 

Jak tło napisu wyrównać do koła? Ma ktoś pomysł? Może lepiej zmienić ciemno tło na obrazek?

2 odpowiedzi

+1 głos
odpowiedź 6 czerwca 2016 przez Mlody89 Mądrala (6,920 p.)
wybrane 6 czerwca 2016 przez rucin96
 
Najlepsza

Możesz próbować z czymś takim:

#example {
  border-radius: 30px/10px; /* horizontal radius / vertical radius */
}

albo dodać do klasy work

overflow: hidden;

co ukryje ci wszystko co wystaje poza div z tą klasą

komentarz 6 czerwca 2016 przez rucin96 Użytkownik (500 p.)

Myślałem że 

overflow: hidden;

działa tylko na tekst (rzadko go używam), ale pomogło. Dzięki!

komentarz 7 czerwca 2016 przez Mlody89 Mądrala (6,920 p.)
Działa na całe elementy zawarte w elemencie posiadającym tę właściwość. Warto tego używać w momencie gdy chcesz np. wsunąć coś do kontenera bez dziwnego efektu przesuwania elementu nad innymi elementami strony.
komentarz 7 czerwca 2016 przez rucin96 Użytkownik (500 p.)
Jeden problem jest tylko, przy scrollowaniu chwilowo zanika (nie wiem czemu), ale zniwelowałem to pierwszym sposobem, który podałeś :)
0 głosów
odpowiedź 6 czerwca 2016 przez niezalogowany
border-radius: 15px;

Coś takiego próbowałeś?

komentarz 6 czerwca 2016 przez rucin96 Użytkownik (500 p.)
Tak, ale problem w tym, że wtedy zaokrągla się również część w kole.

Podobne pytania

0 głosów
1 odpowiedź 230 wizyt
pytanie zadane 9 listopada 2017 w JavaScript przez DariuszH Gaduła (3,100 p.)
0 głosów
1 odpowiedź 2,768 wizyt
pytanie zadane 19 stycznia 2019 w Grafika i multimedia przez betman Bywalec (2,630 p.)
0 głosów
4 odpowiedzi 3,998 wizyt
pytanie zadane 4 kwietnia 2016 w HTML i CSS przez Nicolaus Dyskutant (9,740 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...