• 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
95 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,880 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,880 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 (175,420 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,880 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 (175,420 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,880 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 (175,420 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ź 175 wizyt
pytanie zadane 2 sierpnia 2017 w HTML i CSS przez kevin Gaduła (4,560 p.)
0 głosów
1 odpowiedź 415 wizyt
pytanie zadane 2 maja 2015 w HTML i CSS przez Captivity Obywatel (1,030 p.)
0 głosów
2 odpowiedzi 102 wizyt
pytanie zadane 16 lipca 2016 w HTML i CSS przez ernest4013 Gaduła (3,230 p.)
Porady nie od parady
Zadając pytanie postaraj się o odpowiedni tytuł, kategorię oraz tagi.Tagi

63,177 zapytań

109,411 odpowiedzi

228,567 komentarzy

42,799 pasjonatów

Przeglądających: 201
Pasjonatów: 14 Gości: 187

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.

...