Forum.Legalne.info: Niestandardowy div - Forum.Legalne.info

Skocz do zawartości

Otwarty

Ikona Shoutbox

    Rozszerz pole shoutboxa

Ikona Zaloguj się na forum

    • Login:
    • Hasło:


    Zapamiętaj mnie
Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

Niestandardowy div

#1 Użytkownik jest niedostępny   Panoramixxx 

  • Nowicjusz
  • Grupa: Użytkownicy
  • Postów: 4
  • Dołączył: 12-August 13

Napisany 05 October 2013 - 06:45 PM

Witajcie. Od kilku dni męczę się z uzyskaniem DIVa w kształcie takiego oto nieśmiertelnika NIEŚMIERTELNIK. Macie może jakiś pomysł jak to zrobić? Czy w ogóle jest to możliwe w samym css?
Z góry dzięki za odpowiedź. Pozdrawiam.
0

#2 Użytkownik jest niedostępny   Roberto 

  • You have to trust in something.
  • Grupa: Użytkownicy
  • Postów: 1375
  • Dołączył: 22-February 06
  • MiejscowośćKatowice

Napisany 06 October 2013 - 03:44 PM

próbowałeś border-radius w css ?
...
0

#3 Użytkownik jest niedostępny   Panoramixxx 

  • Nowicjusz
  • Grupa: Użytkownicy
  • Postów: 4
  • Dołączył: 12-August 13

Napisany 09 October 2013 - 07:19 PM

Ten nieśmiertelnik ma trochę wklęsłe boki, górny i dolny ale zamieniłem go na inny ułatwiając sobie sytuację, mimo wszystko dzięki za pomoc.
0

#4 Użytkownik jest niedostępny   galanonim 

  • Zaawansowany
  • Grupa: Użytkownicy
  • Postów: 365
  • Dołączył: 31-January 07
  • MiejscowośćNadarzyn

Napisany 10 October 2013 - 10:16 AM

Coś takiego?
http://jsfiddle.net/fARWp/

HTML:
<img src="http://i.imgur.com/C4m6X1Lh.jpg">
<div></div>

CSS:
img{
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
}
div{    
    position: absolute;
    background: rgba(255,0,0,0.4);
    z-index: 2;
    top: 25px;
    left: 70px;
    width: 890px;
    height: 460px;
    display: block;
    border-top-left-radius: 150px 250px;
    border-bottom-left-radius: 150px 250px;
    border-top-right-radius: 150px 250px;
    border-bottom-right-radius: 150px 250px;
}

Dodaj obrazek PORTAL.SIEKIER.PL - strona o mnie, o mojej pasji, zainteresowaniach, nowinkach i innych ważnych dla mnie rzeczach. Zapraszam Dodaj obrazek

Jeśli pomogłem, kliknij Dodaj obrazek przy moim poście Dodaj obrazek
0

#5 Użytkownik jest niedostępny   DrOetker 

  • Rozkręca się
  • Grupa: Użytkownicy
  • Postów: 37
  • Dołączył: 13-January 13

Napisany 11 October 2013 - 04:24 PM

Kształt można osiągnąć bardzo prosto, wystarczy border-radius:
background-color: #CCC;
border: 5px solid #888;
border-radius: 20px;
padding: 10px;


Natomiast osiągnięcie idealnego diva o teksturze takiego obrazka, jakiego podałeś w swoim oryginalnym poście, który może przybierać dowolne rozmiary i wciąż wyglądać ładnie na stronie internetowej graniczy z niemożliwym. Oczywiście, mógłbyś skorzystać z border-image, ale trzymaj w umyśle, że zachowanie takiej ramki jest absolutnie i pod żadnym pozorem niedostosowane do skomplikowanych wzorów, szczególnie takich ze zdjęć czy skanów. Przypatrz się temu divowi:

http://img28.imagesh...8/6306/i4o3.png
http://img51.imagesh...mg51/1/i4qt.png

W wersji oryginalnej wygląda świetnie, natomiast u pomniejszonej wystąpiły dwie wady: ramka kątów kończy się w tym miejscu, gdzie przeglądarka wyrenderowała tę część ramki krawędzi, na której umieszczono wyrwany kawałek kartki. Druga wada polega na tym, że przez te same zasady rysowania diva, tło wygląda dobrze jedynie względem ramek krawędzi. Ramki kątów w oryginalnym zdjęciu są rozmieszczone dużo dalej, i przez to nabierają ciemniejszego koloru. Ten sposób renderowania został podany przez W3C, i żaden producent nie ma prawa/czelności się od niego odwoływać. Pech.

Jeśli jednak ekstremalnie bardzo ci zależy na tym divie, chociażby miałby być głównym tematem twojej strony, to jedynym sensownym rozwiązaniem godnym lat dziesiątych XXI wieku jest canvas, do którego potrzebujesz JavaScriptu. O ile nie piszesz stron dla komputerów z Windowsem XP SP2 na rozdzielczości monitora 800x600, to powinno to stanowić rozwiązanie mniej więcej zadowalające.

var i = new Image();
i.src = "img/obraz.png";

i.onload = function()
{
	var c = document.getElementByTagName("canvas")[0];
	var x = c.getContext("2d");
	
	//pierdyliard kodu
	
	//musisz za pomocą funkcji drawImage wykonać następujące czynności:
	//-narysować ramkę pseudo-diva, w taki sposób, jaki ci odpowiada
	//-zrobić to samo z tłem, nie wykluczam, że w sposób nieafiniczny, jakieś gotowe API może ci pomóc
	//-dodać zawartość diva, na upartego poprez z-index poza canvasem, bo powodzenia z implementowaniem tagu <video>
}


Z moich osobistych doświadczeń doradzam, że jeśli planujesz powtarzanie jakiegoś elementu typu ramka, to możesz zapomnieć o szczególnej wydajności i musisz użyć funkcji drawImage (mógłbyś użyć fillRect z właściwością fillStyle, ale pech chciał, że wypełnianie jest zakotwiczone u początku układu współrzędnych, więc na większości położeń wypełnienie wychodzi "ucięte i rozpoczęte skądś indziej").

Ogólnie, otrzymywanie idealnego obramowania to straszna męczarnia i czasem jest po prostu nie warte zachodu. Być może powinieneś rozważyć proste przygotowanie tekstury do wyglądania niezauważalnie źle, ale tym sposobem nie osiągniesz ideału. HTML i CSS nie są przygotowane na renderowanie elementów prawdziwego świata, jeśli więc jesteś cierpliwy, poczekaj na HTML6. Na razie twoje środki są ograniczone, ale W3C dokłada wszelkich starań, aby nadać ci możliwość napisania drugiego The Elder Scrolls V: Skyrim w pięć linijek kodu (chociaż zakotwiczone tło wciąż wydaje się im genialnym pomysłem).

Ten post w pigułce:
poddaj się, to niemożliwe,
cześć ~ja
Dodaj obrazek
0

#6 Użytkownik jest niedostępny   Panoramixxx 

  • Nowicjusz
  • Grupa: Użytkownicy
  • Postów: 4
  • Dołączył: 12-August 13

Napisany 11 October 2013 - 07:46 PM

Dzięki za odpowiedzi i pomoc. :rolleyes: Lecę tworzyć dalej!

Ten post był edytowany przez Panoramixxx dnia: 11 October 2013 - 07:53 PM

0

Prześlij ten temat:


Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

1 Użytkowników czyta ten temat
0 użytkowników, 1 gości, 0 anonimowych użytkowników


               
           
       
Nasza strona internetowa wykorzystuje cookies (pol.: ciasteczka)

Na naszej stronie wykorzystujemy ciasteczka (ang. cookies), dzięki którym nasz serwis może działać lepiej - więcej o tym w Naszej polityce prywatności. W każdej chwili możesz wyłączyć ten mechanizm w ustawieniach swojej przeglądarki. Korzystanie z naszego serwisu bez zmiany ustawień dotyczących cookies, umieszcza je w pamięci Twojego urządzenia.

Akceptuję   Zmiana ustawień