Kategoria: css

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 … Continue reading Jak wykonać 2 kolumny w menu wordpress?

Reklamy

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 … Continue reading prosty pop-up, simple pop-up

każdy element listy w innym kolorze

li:nth-child(1) a { border-color: #636393; } li:nth-child(2) a { border-color: #B5222D; } li:nth-child(3) a { border-color: #D4953C; } li:nth-child(4) a { border-color: #609491; } li:nth-child(5) a { border-color: #87A248; }   lub li a { border-color: #636393; } li+li a { border-color: #B5222D; } li+li+li a { border-color: #D4953C; } li+li+li+li a { border-color: #609491; … Continue reading każdy element listy w innym kolorze

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: … Continue reading 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) … Continue reading 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 … Continue reading 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; … Continue reading 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"