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

Szybki kod - CSS - Obramowanie

0 głosów
89 wizyt
pytanie zadane 9 lutego w HTML i CSS przez Bialy03 Początkujący (350 p.)
Jak zrobić tego typu obramowanie w CSS (jeśli się da)?

+-------------+
|                 |
|                 |
+-------------+

Proszę o pomoc. Wiem, że w CSS nie ma takich "plusów", dlatego stąd moje pytanie

2 odpowiedzi

0 głosów
odpowiedź 9 lutego przez arces Pasjonat (17,720 p.)
Słabo responsywna opcja, ale można zrobić po prostu absolutne elementy (plusy). Nie widzę innego wyjścia w takiej sytuacji, ale pytanie czy w ogóle kiedykolwiek spotkasz się z takim problemem? Od ponad 2 lat koduję Front i nie miałem styczności z takim problemem.
0 głosów
odpowiedź 9 lutego przez program naczelny Bywalec (2,170 p.)
Jasne że się da! Stwórz cztery divy (2 linie pionowe i 2 poziome) użyj css (position: absolute) i napisz w nich po kolei znakami | + _. Druga opcja też jest z (position: absolute) tworzysz cztery divy, background-color: black i układasz w kwadrat z (plusami) na rogach.
komentarz 9 lutego przez program naczelny Bywalec (2,170 p.)
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" >
<title>obramowanie</title>
<meta name="description" content="oto twoje obramowanie">

<style>
body
{
margin: 20px;
}

.linia
{
position: absolute;
background-color: black;
width: 50px;
height: 2px;
}
</style>

</head>
<body>
 <div class="linia" style="top: 30px;"></div>
 <div class="linia" style="width: 2px; height: 50px; left: 30px;"></div>
 <div class="linia" style="width: 2px; height: 50px; left: 60px;"></div>
 <div class="linia" style="top: 60px;"></div>
 
</body>
</html>

 

komentarz 9 lutego przez Tomek Sochacki Mędrzec (157,870 p.)
hmm, spoko... a osoba ktora po tobie przyjdzie robic zmiane najpierw dwa dni bedzie myśleć o co tu kaman :) to już chyba wolałbym grafike zamiast css albo pomyśleć nad svg czy canvas...
komentarz 9 lutego przez program naczelny Bywalec (2,170 p.)
czemu? Wg mnie to jest easy, może sobie zrobić nawet diva relative jego jako containera dla elementów(linii) absolute i już jest seksownie. Dalej następnego absolute (text-content) do środka wstawić  i ma tekst z pięknym obramowaniem
komentarz 9 lutego przez Tomek Sochacki Mędrzec (157,870 p.)
kwestia gustu :) swoją drogą to co przyświecało ux designerowi żeby zrobić takie coś na makiecie...
komentarz 9 lutego przez program naczelny Bywalec (2,170 p.)
może zamiarem jego piękna i stara jak świat gra.. a w sumie to taka stworzona w html/css struktura umożliwia użycie js do zmiany jej parametrów, zrobienie jakiejś animacji (rotate, translate, transform). Jak byś to zrobił w png czy svg ? :)
komentarz 9 lutego przez Bialy03 Początkujący (350 p.)

Nieźle się namyślacie laugh. Chodziło mi o to, żeby stronę zrobić w stylistyce terminalu. Żeby każdy element był obramowany w ten sposób, a w środku tekst. Tylko póki co wydaje się to być mało responsywne.

komentarz 10 lutego przez Tomek Sochacki Mędrzec (157,870 p.)

 zrobienie jakiejś animacji

a jaki problem animować SVG bo niezbyt rozumiem :) ?

Jak byś to zrobił w png czy svg ? :)

W png ciężko, ale svg to już nie problem. Ale akurat ja bym tego nie zrobił bo jestem mega przeciwnikiem animacji :) na szczęście UX, z którymi pracuję powielają moją opinię w tym temacie...

komentarz 10 lutego przez Bialy03 Początkujący (350 p.)

Skoro w svg to nie problem, to pomóż wink

Podobne pytania

0 głosów
1 odpowiedź 146 wizyt
pytanie zadane 2 sierpnia 2017 w HTML i CSS przez kevin Gaduła (4,030 p.)
0 głosów
1 odpowiedź 367 wizyt
pytanie zadane 2 maja 2015 w HTML i CSS przez Captivity Obywatel (1,030 p.)
0 głosów
2 odpowiedzi 88 wizyt
pytanie zadane 16 lipca 2016 w HTML i CSS przez ernest4013 Gaduła (3,220 p.)
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

60,244 zapytań

105,928 odpowiedzi

220,065 komentarzy

32,445 pasjonatów

Przeglądających: 152
Pasjonatów: 3 Gości: 149

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...