Szybki kod - CSS - Obramowanie

pytanie zadane 9 lutego 2019 w HTML i CSS przez kryst.4 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

odpowiedź 9 lutego 2019 przez arces Pasjonat (17,700 p.)

odpowiedź 9 lutego 2019 przez program naczelny Gaduła (3,320 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 2019 przez program naczelny Gaduła (3,320 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 2019 przez Tomek Sochacki Ekspert (227,510 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 2019 przez program naczelny Gaduła (3,320 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 2019 przez Tomek Sochacki Ekspert (227,510 p.)

kwestia gustu :) swoją drogą to co przyświecało ux designerowi żeby zrobić takie coś na makiecie...

komentarz 9 lutego 2019 przez program naczelny Gaduła (3,320 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 2019 przez kryst.4 Początkujący (350 p.)

Nieźle się namyślacie . 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 2019 przez Tomek Sochacki Ekspert (227,510 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...