Kategoria: css

Frontend przykładowe wymagania

👾 knowledge of HTML5 and CSS3, CSS preprocessors - SASS and W3C standards, 👾 knowledge of Vue.js / React libraries (as we are VueStrefront Core Partner), 👾 experience in cross-browser testing and familiarity with caniuse, 👾 knowledge of CSS methodologies such as BEM or OOCSS

Jak wykonać 2 kolumny w menu wordpress?

źródło: http://www.prowebdesign.ro/wordpress-sub-menu-items-split-in-2-columns-the-easy-way/ WordPress sub-menu items split in 2 columns. The easy way. Let’s say you have a long list of items in one of your WordPress sub-menu drop downs. It is often the case with Products or Services sections of the site. So, you probably want those sub-menu items to be split in 2 columns. But you … Czytaj dalej Jak wykonać 2 kolumny w menu wordpress? →

element graficzny na końcu dokumentu

HTML: Click me CSS: .button { padding: 15px 50px 15px 15px; color: #fff; text-decoration: none; display: inline-block; position: relative; } .button:after { content: ""; width: 30px; height: 30px; background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px no-scroll; background-color: red; top: 10px; right: 5px; position: absolute; display: inline-block; } .green { background-color: #8ce267; }

prosty pop-up, simple pop-up

źródło: http://www.wikihow.com/Create-a-Simple-CSS-Popup-in-Your-Web-Page Part 1 Adding the Code 1 Add this code inside the head tag of your web page: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> The above code will refer to the online library available. If your web page is not running online, then you must download the jquery library and link it to your webpage. http://tpc.googlesyndication.com/safeframe/1-0-6/html/container.html 2 Add the … Czytaj dalej prosty pop-up, simple pop-up →

Wysuwany aplet

https://webmastah.pl/wysuwany-widget-na-strone/ html class="slideout-widget widget-facebook"> class="slideout-widget-handler"> class="icon-facebook"> class="slideout-widget-content"> href="https://www.facebook.com/webmastahPL">webMASTAH @ Facebook </div> CSs .slideout-widget { position: fixed; right: -15em; top: 50%; transition: right .4s; width: 15em; z-index: 10; } .slideout-widget:hover { right: 0; } .slideout-widget-handler, .slideout-widget-content { background: #eee; border: 1px solid #ddd; padding: 1em .5em; } .slideout-widget-handler { border-right: none; left: -3em; position: absolute; text-align: … Czytaj dalej Wysuwany aplet →

css submit

input[type=text]{padding:5px; border:2px solid #ccc; -webkit-border-radius:5px; border-radius:5px;} input[type=text]:focus {border-color:#333;} input[type=submit]{padding:5px15px; background:#ccc; border:0 none; cursor:pointer;-webkit-border-radius:5px; border-radius:5px;}

definiowanie media queries: standardowe szerokości

Media queries powinno się zdefiniować dla: 320px 480px 600px 768px 900px 1200px przykładowy kod: @media screen and (min-width: 1200px) { .content {} } @media screen and (min-width: 900px) { .content {} } @media screen and (min-width: 768px) { .content {} } @media screen and (min-width: 600px) { .content {} } @media screen and (min-width: 480px) … Czytaj dalej definiowanie media queries: standardowe szerokości →

Formatowanie listy

list-style-type – sposób numerowania listy. Możliwe wartości: square – kwadrat, disc – koło, circle – okrąg, none – brak wypunktowania. list-style-position – określa pozycję znaku listy wypunktowanej. Możliwe wartości: outside – wypunktowanie na zewnątrz listy (domyślnie), inside – wypunktowanie wewnątrz listy, inherit – dziedziczy wartość po rodzicu. list-style-image – definiuje graficzny znak listy wypunktowanej. Możliwe … Czytaj dalej Formatowanie listy →

wyśrodkowanie menu w css

pochodzi ze strony http://blog.piotrnalepa.pl/2010/07/06/css-wysrodkowanie-menu-za-pomoca-css/ #menu { float: left; width: 100%; background: #fff; border-bottom: 4px solid #000; overflow: hidden; position: relative; } #menu ul { clear: left; float: left; list-style: none; margin: 0; padding: 0; position: relative; left: 50%; text-align: center; } #menu ul li { display: block; float: left; list-style: none; margin: 0; padding: 0; … Czytaj dalej wyśrodkowanie menu w css →

font face

w css dodajemy: @font-face { font-family: "Lato"; src: url(Lato-Reg.ttf); font-weight:400; } potem dla określonej pozycji definujemy: font-family: "Lato" najlepiej zgłosić i zdefiniować wiele formatów: @font-face { font-family: 'Proxima Nova'; src: url('proximanova-regitalic-webfont.eot'); src: url('proximanova-regitalic-webfont.eot?#iefix') format('embedded-opentype'), url('proximanova-regitalic-webfont.woff') format('woff'), url('proximanova-regitalic-webfont.ttf') format('truetype'), url('proximanova-regitalic-webfont.svg#proxima_nova_rgitalic') format('svg'); font-weight: normal; font-style: italic; }