Skocz do zawartości

Zdjęcie
* * * * * 1 głosy

Skróć swój CSS (Shorthand properties generator)

shorthand css css3 short

11 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 23 września 2014 - 11:15

#1
http://shrthnd.volume7.io/

Ciekawe narzędzie pozwalające na szybkie skrócenie CSS. Działa na zasadzie zapisywania właściwości w skróconej wersji, czyli kod:
 

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

zamieni na:
 

background: #000 url(images/bg.gif) no-repeat top right;


Dla mnie bardzo przydatne narzędzie, bo nie zawsze pamiętam składnie, żeby z palca napisać poprawną, skróconą wersję.


  • -1

writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 23 września 2014 - 12:01

#2
Ja zwykle mialem problem z marginesami, bo nie pamietalem tej kolejnosci: top right bottom left :P Wszystko inne jakos samo mi sie zapamietalo. :D

Wysłane z mojego LG-E400
  • 0

logo-green-dark.png


unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 23 września 2014 - 12:24

#3

writen, kolejność jest taka jak ruch zegara :) Zaczynasz od godziny 0 czyli góra, póżniej 3 czyli prawo, 6 dół i 9 lewo ;) Może to Ci pomoże :D

 

Jeżeli chodzi zapisywanie w formie 'skróconej' to nie zawsze jest to dobry pomysł :) Jak to sobie poradzi jak brakuje któregoś elementu? :D

 

 

EDIT, sprawdziłem no i radzi sobie źle, poniższy kod:

.test{ background: #fff url(img.jpg) no-repeat 0 0; }
.test.to{background-image:url(noimg.jpg); background-repeat:no-repeat;}

zmienił niestety na to:

.test {
  background: #fff url(img.jpg) no-repeat 0 0;
}

.test.to {
  background: url(noimg.jpg) no-repeat;
}

Przez co (jestem tego pewny na 95%, czyli nie oddam głowy) zostanie nadpisany background-color :P


Użytkownik unbreak edytował ten post 23 września 2014 - 12:26

  • 0

webDeveloper


zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 23 września 2014 - 12:49

#4

writen, kolejność jest taka jak ruch zegara :) Zaczynasz od godziny 0 czyli góra, póżniej 3 czyli prawo, 6 dół i 9 lewo ;) Może to Ci pomoże :D
 
Jeżeli chodzi zapisywanie w formie 'skróconej' to nie zawsze jest to dobry pomysł :) Jak to sobie poradzi jak brakuje któregoś elementu? :D
 
 
EDIT, sprawdziłem no i radzi sobie źle, poniższy kod:

.test{ background: #fff url(img.jpg) no-repeat 0 0; }
.test.to{background-image:url(noimg.jpg); background-repeat:no-repeat;}
zmienił niestety na to:
.test {
  background: #fff url(img.jpg) no-repeat 0 0;
}

.test.to {
  background: url(noimg.jpg) no-repeat;
}
Przez co (jestem tego pewny na 95%, czyli nie oddam głowy) zostanie nadpisany background-color :P

 


No to masz na githubie source :) Popraw i odeślij :D


  • 0

writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 23 września 2014 - 13:27

#5

Nie no, teraz już pamiętam. :P

Ale co się niby nadpisze, kod jest ok.


  • 0

logo-green-dark.png


zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 23 września 2014 - 13:44

#6

Nie no, teraz już pamiętam. :P

Ale co się niby nadpisze, kod jest ok.

Zamieniło mu background-image na background. I ten wcześniej zdefiniowany kolor biały tła zostanie nadpisany.


  • 0

writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 23 września 2014 - 15:42

#7

Zamieniło mu background-image na background. I ten wcześniej zdefiniowany kolor biały tła zostanie nadpisany.


Wydawało mi się że nie może zostać nadpisany jeśli w tym drugim backgroud nie jest podany kolor. Sprawdziliscie to, bo mi się nie chce. :P

PS. Nie mam zamiaru korzystac z tego narzędzia i wam też to odradzam. Zapamiętanie składni przyjdzie samo, wystarczy więcej praktyki! Napiszcie kilka stronek bez dostepu do internetu i takich narzędzi to na pewno zapamiętacie. :D

Wysłane z mojego LG-E400
  • 0

logo-green-dark.png


zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 23 września 2014 - 16:14

#8

Wydawało mi się że nie może zostać nadpisany jeśli w tym drugim backgroud nie jest podany kolor. Sprawdziliscie to, bo mi się nie chce. :P

PS. Nie mam zamiaru korzystac z tego narzędzia i wam też to odradzam. Zapamiętanie składni przyjdzie samo, wystarczy więcej praktyki! Napiszcie kilka stronek bez dostepu do internetu i takich narzędzi to na pewno zapamiętacie. :D

Wysłane z mojego LG-E400

A co  w przypadku, gdy po kimś masz projekt? :) Narzędzie jest super, tylko wymaga dopracowania. 


  • 1

writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 23 września 2014 - 16:31

#9

 

 

A co  w przypadku, gdy po kimś masz projekt?

Racja. :)


  • 0

logo-green-dark.png


unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 24 września 2014 - 08:29

#10


Wydawało mi się że nie może zostać nadpisany jeśli w tym drugim backgroud nie jest podany kolor. Sprawdziliscie to, bo mi się nie chce
Tak jest, bo moja formuła wskazuje co ma zostać nadpisane: 'backgroud-image' etc. a to co zrobił ten skrypt to nadpisał całe 'background'.

To tak jakby było:

.test{background: #fff url(image.jpg) repeat 0 0;}
.test{background:#000;}

To myślisz jakie tło będzie miał .test? :D


  • 0

webDeveloper


writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 24 września 2014 - 11:53

#11
Noo ok. :)

Wysłane z mojego LG-E400
  • 0

logo-green-dark.png


Hajmus

    Nowy użytkownik

  • 1 postów
    • Czas spędzony online: 13m 50s
0
Neutralna

Napisano 21 października 2014 - 13:12

#12

Świetne narzędzie, od dawna szukałem jakiegoś generatora do minimalizacji wielkości pliku z kodem ;)


  • 0





Podone tematy Collapse


Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych