Email Marketing

 

Cool hover efekty pomocí CSS3

HTML, CSS a JS přečteno 2036 11.02.
2013
komentováno 0
511918be619c1-screenshot20130211at17-13-30.png

Na webu in web son najdete spoustu návodů a ukázek nejen k CSS3. Jedním z nich jsou tyto kruhové hover efekty.

In today’s tutorial we’re going to create some simple but fancy hover effects on thumbnails using CSS only. The techniques that involved are CSS3 Transitions together with the :hover pseudo-class, and other CSS properties for styling as well.

Celý článek

zobrazit komentáře

Úvod do Grid systémů

HTML, CSS a JS přečteno 1843 01.11.
2011
komentováno 0

Na blogu Meebia dnes vyšel velmi zajímavý článek Adama Amrana, pojednávající o grid systémech.

Grid systémy můžete vnímat jako jakési vodítko při navrhování. Jedná se v zásadě o hrubou strukturu, podle které jsou do návrhu umisťovány a pozicovány jednotlivé prvky. Dávají návrhu řád a pomáhají docílit již zmíněné přehlednosti a čitelnosti, ať už díky tomu, že se díky nim snáze udržuje rovnoměrný spacing mezi prvky, anebo díky přesnějším a “hezčím” rozměrům, kterých se s grid systémem lépe dosahuje.

Více najdete přímo v článku.

zobrazit komentáře

jQuery pluginy, které musíte znát #1

HTML, CSS a JS přečteno 5366 28.10.
2009
komentováno 13

Pro ty z vás, kteří nevědí, co to jQuery je, si stručně povíme, o co se jedná. JQuery je javascriptový framework, který vám usnadní práci s javascriptem při vývoji webových stránek. Je to knihovna, která se nalinkuje do hlavičky vašeho webu a umožní vám zlepšit interaktivitu či pomůže vytvořit takové prvky a efekty, které by jste museli jinak zdlouhavě programovat a ladit.

JQuery není jediný framework svého druhu, u mě se však stal nejoblíbenějším a při vývoji webu bych si bez něj práci nedokázal představit. V následujících několika článcích si ukážeme několik zajímavých jQuery pluginů, které by jste jako tvůrce webu neměli přehlédnout.

Při brouzdání internetem nacházím spoustu zajímavých řešení, které originálním a taky krativním způsobem přistupují k problémům, které se na webu objevují. Při stavbě webu se dá narazit třeba na problém s nedostačujícím místem pro obsah. Výsledek: použijí se například tzv. taby a tím na jednom místě může být umístěno několikanásobně více obsahu. Pluginy jQuery nemusí řešit jen problémy, ale jejich další funkcí je výrazné zpestření webové prezentace či aplikace a dodaní větší interakce s uživatele.

Stáhněte si jQuery.

1. jQuery plugin pro Twitter

V dnešní době sociálních sítí nemůžeme začít jinak než Twitterem. Pomocí tohoto pluginu velice jednoduše vypíšete několik posledních tweetů z této oblíbené služby přímo na váš web či blog. Jak nasazení tak i konfigurace je velice jednochá.

Napojení pluginu

<link rel="stylesheet" href="jquery.twitter.css" type="text/css">
<script src="jquery.twitter.js" type="text/javascript">script>

HTML

<div id="twitter">div>

Nastavení

$(document).ready(function() {
  	$("#twitter").getTwitter({
  		userName: "jquery",
  		numTweets: 5,
  		loaderText: "Loading tweets...",
  		slideIn: true,
  		showHeading: true,
  		headingText: "Latest Tweets",
  		showProfileLink: true
  	});
  }); 

2. Table sorter - seřazení dat v tabulce

Pokud programujete nějakou aplikaci, jistě se vám bude hodit následující plugin, který z hlavičky tabulky udělá interaktivní prvek, pomocí něhož můžete snadno data v tabulce seřazovat podle různých krotérií. Tímto si danou aplikaci posunete zase o kousek blíže k desktopové aplikaci, což se dneska označuje pojmem RIA (Rich Internet Application). Více o RIA v některém z dalších článků, nyní se pojďme podívat na zmiňovaný table sorter:

Máme tabulku:

<table id="myTable">
	<thead>
		<tr>
			<th>Last Nameth>
			<th>First Nameth>
			<th>Emailth>
			<th>Dueth>
			<th>Web Siteth>
		tr>
	thead>
	<tbody>
		<tr>
			<td>Smithtd>
			<td>Johntd>
			<td>jsmith@gmail.comtd>
			<td>$50.00td>
			<td>http://www.jsmith.comtd>
		tr>
		<tr>
			<td>Bachtd>
			<td>Franktd>
			<td>fbach@yahoo.comtd>
			<td>$50.00td>
			<td>http://www.frank.comtd>
		tr>
		<tr>
			<td>Doetd>
			<td>Jasontd>
			<td>jdoe@hotmail.comtd>
			<td>$100.00td>
			<td>http://www.jdoe.comtd>
		tr>
		<tr>
			<td>Conwaytd>
			<td>Timtd>
			<td>tconway@earthlink.nettd>
			<td>$50.00td>
			<td>http://www.timconway.comtd>
		tr>
	tbody>
table> 

Do head vložíme

<script type="text/javascript" src="/path/to/jquery.tablesorter.js">script>

Inicializace a nastavení

// automatický sorter na všechny sloupce
$(document).ready(function() {
	$("#myTable").tablesorter();
});

// pouze první dva sloupce
$(document).ready(function() {
	$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
});

3. Font sizer plugin - zvětšování textu

Zvětšování textu se dá provádět přímo v prohlížeči, ale většinou se jedná o funkci nežádoucí, protože se zvětší i text, který zvětšovat nechcete. Proto je daleko výhodnější tuto funkci zakomponovat přímo do webové stránky. Navíc je to velice snadné, stačí vyžít tohoto pluginu.

Do head vložíme

<script language="javascript" src="js/fontsizer.jquery.js">script>

HTML

Na místo, kde chceme ovládání velikosti písma, vložíme následující HTML:

<div class="fontResizer">
	<a href="#" class="smallFont">Aa>
	<a href="#" class="medFont">Aa>
	<a href="#" class="largeFont">Aa>
div>

Nastavení a inicializace

<script language="javascript"> 
	$(document).ready(function() {
		fontResizer('10px','11px','12px');
	});
script>

CSS

.fontResizer {
    display: block;
    position: absolute;
    top: 0; left: 0;
  }
  .fontResizer a {
    display: block;
    float: left;
    width: 17px;
    height: 17px;
    text-align: center;
    border: 1px solid #ccc;
    line-height: 15px;
    color: #666;
    text-decoration: none;
  }
  .fontResizer a:hover {
 color: #000; text-decoration: none;
 }    


.smallFont {
 font-size: 9px;
 }
  .medFont {
 font-size: 13px;
 }
  .largeFont {
 font-size: 15px; 
}
  .curFont {
 background: #EEEEF7;
 }

Příště si přiblížíme jQuery UI a napíšeme si v něm malou drag & drop aplikaci.

zobrazit komentáře

Odstranění tečkovaného okraje u vybraného odkazu (CSS)

HTML, CSS a JS přečteno 3363 28.05.
2009
komentováno 7

Tato "funkce" se nachází v téměř všech moderních prohlížečích a spočívá v tom, že prohlížeč kolem odkazu, na který se kliklo, nebo na který jste se dostali stiskem klávesy TAB, udělá tečkovaný border. Pro lepší představu přikládám ukázku, jak nehezky to vypadá v reálu.

seznam

Mnohdy se ale stává, že vytvoříme tlačítko, které má pouze JavaScriptovou událost a v tu chvíli se nám neprovede refresh stránky a taky pro tuto akci je graficky nepěkné, když nám již zmiňovaný tečkovaný border kolem odkazu zůstane. Osobně pro každý projekt/web/aplikaci globálně zakazuju tuto vlastnost následujícím zapisem v CSS.

* a {
  outline: none;
}

Vy ji ale samozřejmě můžete použít v rámci dědičnosti nebo jen pro určitou třídu či identifikátor, jak jste zvyklí.

zobrazit komentáře

Označení odkazu podle typu nebo umístění (CSS)

HTML, CSS a JS přečteno 3191 24.05.
2009
komentováno 0

Pokud se věnujete tvorbě webových stránek, určitě se vám nejednou stalo, že jste potřebovali označit odkaz, který vede na jiné umístění, než je na vašich stránkách nebo jste jen potřebovali označkovat odkaz podle typu cíle, na který odkazujete. Na toto existuje spousta JavaScriptů, spousta frameworků a v neposlední řadě spousta řešení pomocí php. My se ale dnes podíváme na jednu z jednodušších a řekl bych i jednu z nejefektivnějších variant, jak toho docílit jednoduše jen za pomocí CSS. Mnoho lidí tuto metodu nezná nebo se s ní zatím nesetkali, proto si ji dnes popíšeme.

Nutno dodat, že následující řešení není podporováno v prohlížeči IE6 (překvápko jako hrom  ), ale nejedná se zase až tak o ztěžejní funkci, která by pro tento zastaralý a dnes již méně využívaný prohlížeč (samozřejmě podle zaměření daného webu) měla být odladěna. Odladit tuto funkci i pro IE6 sice jde (třeba vlastní třídou), to by ale nebylo plně automatizované, což my nechceme.

Externí odkaz

Pokud potřebujeme označkovat externí odkaz, který míří ven z našeho webu, budeme předpokládat, že je to každý odkaz, který začína na http://. Zápis CSS bude vypadat následovně:

a[href^="http:"] {
	background: url('/images/externalLink.gif') no-repeat right top;
	padding-right: 10px;
}

Zároveň se ale dá předpokládat to, že můžeme pomocí absolutní adresy směrovat odkazy i na náš web a v tu chvíli nechceme nijak odkaz odlišovat, i když začíná na http://. Tento případ ošetříme úplně jednoduše zápisem:

a[href^="http://www.vasestranka.cz"],
a[href^="http://vasestranka.com"] {
	background-image: none !important;
	padding-right: 0;
}

Odkazy, které nechceme nijak odlišovat (napadají mě snad jen placené reklamy) a splňují výše uvedený parametr, vynulujeme jednoduše, jak jsme zvyklí:

.no_exter {
	background-image: none !important;
	padding: 0;
}

Odkazy podle typu

Další případ, kdy můžeme tohoto využít, jsou odkazy, u nichž přesně určujeme typ nebo příponu. Zápis pro odlišení odkazů na e-mailovou adresu může vypadat takto:

a[href^="mailto:"] {
	background:url('/images/email_link.png') no-repeat right top;
	padding-right: 22px;
	padding-bottom: 5px;
}

Pro .pdf, .doc nebo třeba .rss můžeme použít následujícího zápisu:

a[href$=".pdf"] {
	background:url('/images/page_pdf.png') no-repeat right top; 
	padding-right: 22px; padding-bottom: 5px;
}

a[href$=".doc"] {
	background:url('/images/page_word.png') no-repeat right top; 
	padding-right: 22px; padding-bottom: 5px;
}

a[href$=".rss"], a[href$=".rdf"] {
	background:url('/images/feed.png') no-repeat right top; 
	padding-right: 22px; padding-bottom: 5px;
}

Další využití a možnosti jistě najdete sami podle těchto předloh. Zajímalo by mě, jestli jste tuto metodu znali, jestli ji používáte nebo používáte jinou vámi osvědčenou metodu. Těším se na komentáře.

zobrazit komentáře

 

Email Marketing