CSS - Strona 13 - Kody, triki, sztuczki

30 lip 2017

Rozwijane menu

Najpierw budujemy strukturę html. Wszystko jest robione w scss, js w wersji ES6 i gulp
Do ES6 używam gulp-babel aby przekonwertować js do es2015

<div class="container">
  <div id="accorions">
    <div class="accordion">Section 1</div>
    <div class="panel">
      <p>Sauerkraut can be garnished with cored avocado, also try decorateing the cake with hollandaise sauce.
        Asparagus can be marinateed with crushed lettuce, also try flavoring the loaf with salsa verde.
        with lobsters drink cream.</p>
    </div>

    <div class="accordion">Section 2</div>
    <div class="panel">
      <p>Aww, raid me parrot, ye dead landlubber! Swashbuckling, coal-black whales cowardly vandalize a mighty, gutless
        scabbard.
        Scabbards sing on booty at port degas! Small, dead tobaccos darkly fight a black, lively dagger.
        seashells fall with love.</p>
    </div>

    <div class="accordion">Section 3</div>
    <div class="panel">
      <p>Turbulence at the bridge was the adventure of mineral, lowered to a gravimetric mermaid.
        Moon at the universe was the mystery of coordinates, feeded to a real planet.
        wisely handle a processor.</p>
    </div>
  </div>
</div>

Czytaj dalej

24 cze 2017

Nowy sposób serwowania ikon SVG

Sposób ten działa nawet w starszych przeglądarkach takich jak IE9.
Jednym z pierwszych możliwości jest budowa zestawu ikon które umieszczam od razu za "body" dla czego tutaj a nie na dole strony przed zamknięciem "/body" otóż gdy strona jest zbyt złożona i renderuje się dość wolno lub otwieramy stronę na telefonie i to w dodatku na słabym internecie np. 2G to ikony nie są widoczne od razu tylko renderują się dopiero po jakimś czasie. Sprawdzone i przetestowane.

<svg xmlns="http://www.w3.org/2000/svg" style="width: 0; height: 0; display: none;">
  <symbol id="icon-home" viewBox="0 0 32 32">
    <title>home</title>
    <path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
  </symbol>
  <symbol id="icon-pencil" viewBox="0 0 32 32">
    <title>pencil</title>
    <path
      d="M27 0c2.761 0 5 2.239 5 5 0 1.126-0.372 2.164-1 3l-2 2-7-7 2-2c0.836-0.628 1.874-1 3-1zM2 23l-2 9 9-2 18.5-18.5-7-7-18.5 18.5zM22.362 11.362l-14 14-1.724-1.724 14-14 1.724 1.724z">
    </path>
  </symbol>
</svg>

Teraz w miejscu w którym chcemy umieścić ikonę

<svg class="icon icon-home">
  <use xlink:href="#icon-home"></use>
</svg>

Oczywiście nie obejdzie się bez dodania odpowiedniego stylu dla icon 🙂

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

Czytaj dalej

27 kwi 2016

Obrót strony o losową liczbę stopni

PHP:

$rotate_deg = rand(2, 4);
if(time()%3==0) $rotate_deg=180;
$smarty->assign('rotate_deg', $rotate_deg);

Smarty, html i css:

!{if $smarty.now%2==0 && $now_date=='04-01'}!
<style>body {overflow-x: hidden;}</style>
<div style="position: fixed; bottom:10px; left:10px; font-size:15px; color:green;">;)</div>
<div style="transform:rotate(!{$rotate_deg}!deg); -webkit-transform:rotate(!{$rotate_deg}!deg); -moz-transform:rotate(!{$rotate_deg}!deg); -o-transform:rotate(!{$rotate_deg}!deg);">
!{else}!
<div>
!{/if}!
..... strona ....
</div>

1 sty 2016

Optymalizacja wordpress

Poniżej kilka trików które pozwoliły mi przyspieszyć bloga z 32/22 w PageSpeed Insigth do 90/100 - oczywiście to zależy od strony, ilości zdjęć, szybkości serwera itp, wszystko ma znaczenie.
I to jest blog ze zdjęciami (blog.grzegorztomicki.pl), jak dla mnie bardzo zacnie 🙂

1. Będziemy potrzebować dostęp do .htaccess
W którym dodajemy (nie będę opisywał co dokładnie jest w nim robione bo wszystko można znaleźć opisane w internecie)

<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
#</ifmodule>



<ifmodule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</ifmodule>

<ifmodule mod_expires.c>
  ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                          "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"



# Your document html
  ExpiresByType text/html                 "access plus 0 seconds"

# Data
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"

# RSS feed
  ExpiresByType application/rss+xml       "access plus 1 hour"

# Favicon (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 1 week" 

# Media: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"

# HTC files  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"

# Webfonts
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"
  ExpiresByType text/javascript           "access plus 1 year"

  </ifmodule><ifmodule mod_headers.c>
    Header append Cache-Control "public"
    Header unset ETag
    FileETag None
  </ifmodule>

Czytaj dalej

7 wrz 2015

jQuery UI Autocomplete highlight

Mamy sobie prosty formularz. Do podpowiedzi użyjemy pluginu jquery autocomplite. Chcemy również dodać wyboldowanie podpowiedzi.
Dokładnie uzyskać taki efekt "meble, Waszawa" gdzie highlight jest zmianą koloru na czarny i wyboldowaniem.

<form id="search" action="/" method="GET" role="search">
  <fieldset>
    <input id="query" type="text" name="query" value="" maxlength="255" autocomplete="off"
      placeholder="Produkt, usługa, miasto, ulica"/>
    <button type="submit" id="button-search"></button>
  </fieldset>
</form>

A teraz trochę js 😉

Czytaj dalej