50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

width = "650">
width = "650">
Smashing-magasin-annonse i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer) /> i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer) i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer) i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Selv om CSS er vanligvis betraktet som en enkel og grei språk, noen ganger er det krever kreativitet, dyktighet og litt eksperimentering. Den gode nyheten er at designere og utviklere over hele verden ofte står overfor lignende problemer, og velger å dele sine innsikter og løsninger med samfunnet.

Det er her vi kommer i. Vi er alltid ute etter å samle slike artikler for våre innlegg slik at vi kan levere de mest nyttige og relevant innhold til våre lesere. I dette innlegget presenterer vi en oversikt over nyttige CSS / jQuery koding tips, triks og teknikker for visuelle effekter, layout og web form design for å hjelpe deg med å finne løsninger på problemer du har å gjøre med eller vil måtte håndtere i fremtiden.

Det kan være lurt å se på lignende CSS-relaterte innlegg som vi publiserte siste måneder:

[Offtopic: forresten, fikk du allerede får ditt eksemplar av den splitter nye Smashing Book ?]

CSS utforminger: Teknikker og løsninger

Facebook Style Bunntekst Admin Panel /> Lær hvordan du gjenskaper Facebook bunnteksten admin panel med CSS og jQuery. Sjekk også ut del 2 .

CSS-teknikk-15 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Tilpasningsdyktig Vis: Hvordan gjør de det? /> Denne opplæringen forklarer hvordan du manuelt endre en layout, og det viser to store eksempler og "hvordan de gjorde det."

CSS-teknikk-01 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Enkel Display Switch med CSS og jQuery /> En rask og enkel måte å sette i stand brukernes å bytte sideoppsett ved hjelp av CSS og jQuery.

CSS-198 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Quick Tips - størrelsesendring bilder basert på nettleservindu Størrelse /> I fluid layout, formatering av tekst for å justere jevnt til vindusstørrelsen er enkelt, men bildene er ikke som væske-vennlig. Denne raske tips viser hvordan du kan veksle mellom to bildestørrelser basert på størrelsen av nettleseren, DIV eller hva annet du velger.

CSS-064 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

En side CV Site /> En ren layout på én side-bokstavelig talt (bare en index.html-fil med ekstra bilder). Den leveres med kontaktinformasjon i microformats og et hovedområde for gjenopptas ved hjelp av en definisjon liste ( dl ). Og det skrives bra.

CSS-000 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Plugger: Automatiser Skjerm: fast + + /> Chris Wetherell innlegg på knagger, en strategi for å ha en rullefeltet men uavhengig rulle områder. Etter den første, klikker du på andre elementer for å snu mellom størrelser. Du vil se at et område er bla avhengig av konfigurasjonen.

CSS-135 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

CSS 100% høyde /> Et vanlig problem blant designere er hvordan man skal få en div til å strekke 100% av vinduet høyde. Det er noen forskjellige teknikker der ute, og denne opplæringen viser en av dem.

CSS-teknikk-18 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

CSS3 Rullegardinmeny /> En ren, enkel en fin navigeringsmenyen, designet av Nick La.

CSS-teknikk-21 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

CSS triks for en rulling Gjennomsiktig bakgrunn Effect /> Bla til siden for å se en kamp mellom godt og ondt tar form. Effekten krever to bilder: en transparent og en flislagt gradient bilde. Gradient ruller under den gjennomsiktige PNG. Fordi det stemmer overens med fargene i PNG, forsvinner hvert sett av bilder, avhengig av den delen av gradienten de er på toppen av.

CSS-148 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Fluid Images /> Som standard, et bilde element som er 500 piksler ikke akkurat spiller fint med en container så store som 800 piksler, eller en så liten som 100. Hva er en designer å gjøre?

CSS-069 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Bla / Følg Sidebar, flere Teknikker /> Et veldig enkelt konsept: sidepanelet følger deg når du blar nedover siden. Det finnes flere måter å gå om det. To er dekket her: CSS og JavaScript (jQuery), med en bonus CSS triks.

CSS-teknikk-00 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Vertikal Sentrering Med CSS /> Det finnes flere måter å vertikalt sentrum objekter ved hjelp av CSS, men velger den rette kan være vanskelig. Her er en liste over de beste måter og en forklaring på hvordan du oppretter en fin sentrert nettsted.

CSS3-nye-08 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Lag YouTube-lignende tilpasses vise ved hjelp av CSS og jQuery /> Annet enn det "Slå av lyset"-funksjon, har YouTube stor ting, for eksempel "Endre visning" funksjonen, som lar deg bytte mellom normal og bred måte, således utvide eller krympe videoen området. Opprette dette er veldig enkel.

CSS-142 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Slik oppretter du en vannrett rulling nettsted /> Hvis nettsteder var laget av tre, ville kornet kjøre opp og ned. Vertikal er den naturlige flyten av Internett. Men nettlesere er utstyrt med vertikal og horisontal rulling barer, ikke sant? Vi har valget mellom å gå mot strømmen og lage websider som bla hovedsakelig horisontalt og at selv utvide horisontalt for å imøtekomme mer innhold. Kanskje en liten slag for usability, men en kul kreativ touch likevel!

CSS-teknikk-02 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Rent CSS - falsk Minimum Marger /> min-margin er ikke-eksisterende i CSS verden. Etter at du har grublet og Googled den, sjekk ut løsningen her.

CSS-teknikk-03 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Lag sidestolpar for like Høyde med Faux Columns /> CSS kan være vanskelig virksomheten. Opprette kolonner med lik høyde, hvor innholdet i en kolonne er lengre enn innholdet i en annen, er frustrerende. Her er der faux-kolonnen teknikk kan hjelpe. Finn ut hvordan denne løsningen gjør selv den mest kompliserte oppsett en lek å kode.

Innstilling Lik Heights med jQuery /> Her er et skript for å matche høydene av boksene i samme container og skape et ryddig rutenett, med lite overhead.

CSS-141 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Quick Tips: Sentrert Fake Flyter /> Det var måter å sentrum-venstre-justere fløt elementer, men så inline-block ble populær og alt forandret. Etter litt fiksing og triksing, Zaharenia Atzitzikaki funnet en effektiv og (mest) kryss-nettleser-kompatible vei til sentrum elementer uten flyter.

6 Fleksibel jQuery programtillegg til kontroll Web sideoppsett enkelt /> En samling av seks jQuery plug-ins for å håndtere sideoppsett lett.

CSS-125 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Fire metoder for å opprette Equal-Høyde kolonner /> Denne artikkelen tar for seg hvordan å lage lik høyde kolonner som fungerer i alle de store nettleserne (inkludert IE6). Alle metodene viser hvordan du lager en tre-kolonne layout.

CSS-065 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Hvordan: CSS Stor Bakgrunn /> En tutorial med ulike CSS eksempler for hvordan å lage en stor bakgrunn ved hjelp av enten ett enkelt bilde eller doble bilder.

CSS-080 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

En fin liten CSS Positioning Technique /> Her har vi en grunnleggende sorterte liste ( ul ), med venstre-fløt bilder hvor teksten ikke brytes under bildene. Selvfølgelig kunne denne teknikken brukes i massevis av andre tilfeller.

CSS-117 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Perfekt Full Page Bakgrunnsbilde /> Denne teknikken gjør det mulig for et bilde til å fylle siden, uten mellomrom. Bildet skalaer etter behov og beholder proporsjonene, uten at det medfører rullefelt.

CSS-162 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Smart Kolonner Med CSS og jQuery /> I observere flytende bredde nettsteder, ser Soh Tanaka to vanligste teknikkene for visning av kolonner: faste kolonner og flytende kolonner. Han peker på ulempene med begge deler, og plasser sin løsning.

CSS-057 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Bilder og visuelle effekter med CSS

A Beautiful Apple-stil Slideshow Galleri Med CSS og jQuery /> Lag en Apple-lignende lysbildeserie galleri, lik den som brukes på Apples nettsted for å presentere produktene. Den arbeider helt i fronten, ingen PHP eller databaser kreves.

CSS-teknikk-12 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Rolling en koks kan rundt med ren CSS /> Román Cortés er å ha mye gøy å gjøre CSS triks i disse dager. Han bare bygget et rullerende cola kan som bruker background-attachment , background-position og en del andre triks for å oppnå effekten. Ingen fancy CSS3 nødvendig her!

CSS3-nye-10 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Gråtone Hover Effect Med CSS og jQuery /> For noen måneder siden, introduserte James Padolsey en kul gråskala teknikk for ikke-IE nettlesere. Hans teknikk inspirerte Soh Tanaka å komme opp med en midlertidig løsning med en lignende effekt. Hans løsning er avhengig av CSS Sprites og noen få linjer jQuery, men det krever litt forberedelser før gjennomføring. Det er ikke anbefalt for store prosjekter, er det sannsynligvis best for porteføljen stykker.

CSS-055 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Codename Rainbows /> Noen JavaScript og CSS Magien er brukt her for å bruke en to-farge gradering til tekst. Skygger og lyse kan også benyttes. Dette fungerer spesielt bra på store nettsteder og for dynamisk innhold der skape bilder for hver eneste forekomst ville være upraktisk.

CSS-097 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

3 Enkel og rask CSS Teknikker for faux Bilde Beskjære /> Denne artikkelen oppsummerer tre rask og enkel CSS teknikker for å vise bare en del av et bilde. Alle teknikkene trenger bare et par linjer med CSS. Du er ikke bokstavelig talt beskjæring, det er derfor det heter faux image beskjæring. Disse teknikkene kan være nyttig hvis du vil beholde bilder til en viss størrelse (for eksempel miniatyrbilder i en nyhetsmelding avsnitt). Å kunne bruke CSS til å kontrollere hvilken del av bildet som skal vises er stor.

CSS-teknikk-08 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Image rollover Borders som ikke endres Layout /> Med CSS, er grensen av blokk-nivå element faktorisert i elementets størrelse i oppsettet. Så hvis du legger til en kantlinje på et element på hover, vil oppsettet skift. I dette innlegget, finner du hvordan du bruker den vanlige grensen eiendommen og skape indre grenser for å komme seg rundt det.

CSS-teknikk-10 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Horisontal Stripes /> Denne leksjonen viser deg hvordan du lager aldri slutter horisontale striper i webdesign ved hjelp av CSS.

CSS-teknikk-14 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Ni Teknikker for CSS Bilde erstatning /> Sett ni forskjellige teknikker av bildet erstatning på prøve.

CSS-teknikk-13 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Bokeh effekter med CSS3 og jQuery /> Denne opplæringen lærer du hvordan du kan gjenskape uskarphet effekt med CSS 3. Med litt hjelp av jQuery, kan vi legge litt tilfeldig i farge, størrelse og plassering for effekten.

CSS-teknikk-16 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

En Stasjonær Logo at endringer på side Bla med CSS /> Her er en interessant effekt som endrer logoen når siden er rulles, ved hjelp av CSS background-attachment eiendom.

CSS3-nye-04 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Silhouette fade-Ins /> For å oppnå effekt i bildet ovenfor, første vi trenger en DIV med silhuettene som bakgrunnsbilde. Så vi legger fire bilder i den DIV, alle nøyaktig samme størrelse, med hvert bandmedlem uthevet. Disse bildene er skjult som standard. Da er du absolutt posisjon fire regioner på toppen av DIV, disse er de roll-over link områder. Med jQuery, bruker vi hover hendelser til dem, falming i det aktuelle bildet.

CSS-046 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Lage trekanter i CSS /> Få folk til å innse at en leser trekker grenser på vinkler. Denne teknikken tar nytte av det. Den ene siden av grensen er gitt fargen på pilen, og resten er gjennomsiktige. Så du gir den grensen en stor bredde, de ovenfor er 20 piksler.

CSS-004 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

En Parallax optisk illusjon med CSS: The Horse i Motion /> På tide med litt moro med CSS og optiske illusjoner.

CSS-203 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Pure CSS Line Graph /> Ideen her er ikke bare å tilby data visualisering til folk som ikke er komfortabel med å bruke skriptspråk, men å demonstrere kraften i CSS, og tilbyr en annerledes måte å bruke CSS. Hvis du ikke er fan av linje grafer og data visualisering, kan du fortsatt dra nytte av denne artikkelen. Tenk på det som en CSS eksperiment, og lære en ting eller to om CSS Sprites og posisjonering.

CSS-037 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Zooming med jQuery og CSS /> Dette innlegget handler om teksten zooming med jQuery og CSS. Dette er et grunnleggende nivå opplæringen om å endre en stil ved hjelp av en jQuery script. En enkel måte å zoome nettside innhold .

CSS-146 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Lag Resizing Miniatyrer Bruke Overløp Bolig /> Denne opplæringen lærer du hvordan du kan styre thumbnail størrelser. Noen ganger vi ikke har nok plass til å passe store miniatyrbilder, og men vi vil helst unngå små indecipherable bilder. Ved hjelp av dette trikset, kan vi begrense standard dimensjoner av miniatyrbilder og vise dem i full størrelse når brukeren mus over dem.

CSS-150 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Kryss-nettleser skygger bruker rein CSS /> De fleste metodene for å legge til drop-skygger til innhold blokkene krever ekstra HTML mark-up og en eller flere PNG-bilder. Men ved å kombinere Glow og Shadow filtre, noe som ganske ligner de gjengitte CSS3 skyggen kan oppnås.

CSS-151 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Dato emblemer og kommentar Bubbles for bloggen din /> En av de tingene du har å forholde seg til når bloggen vokser er å måtte pugge mer info i mindre plass til å vise alt du vil vise. En ting du kan gjøre er å legge til et ikon for dato og deretter en boble over det med antall kommentarer til innlegget.

CSS-teknikk-11 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

CSS Tabeller og Web Forms

UX triks: display skjemadata som tabelldata /> Dette er et lite knep for å forbedre brukeropplevelsen av skjemaer. Det viser redigerbar form-data som leses tabelldata.

CSS-teknikk-04 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Tabeller: Ikke som noe ondt som du tror /> Tabeller er onde, ikke sant? Ja og nei. For tabelldata, er de ikke, selvfølgelig. Det er det tabeller er for i første omgang. CSS kan gjøre en utmerket jobb med styling et riktig formatert tabell, og bordet strukturen gir gode stillas for JavaScript samtaler. Men hva er adressert her er å bruke tabeller for ikke-tabelldata (dvs. for layout). Ja, det stemmer: ved hjelp av tabeller for layout.

CSS-075 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Perfekt Drop-Down Logg in Box Like Twitter Bruke jQuery /> Denne viser deg hvordan du oppretter en Twitter-stil drop-ned log-in form ved hjelp av jQuery. Det er veldig enkelt, sparer det plass på siden og besøkende føler seg komfortabel med det awesome veksle skjemaet.

CSS-158 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Lag en Velg Alternativer-Printable /> Når du skriver ut en webside med select elementer på den, velger du rullegardinmenyen skriver ut akkurat som det ser ut på nettet. Dette selvfølgelig er praktisk talt ubrukelig på utskriften. Ett alternativ for håndtering av dette er å følge hvert select HTML-element med en ikke-sorterte liste som dupliserer innholdet. Skjule sorterte liste i hoved CSS-filen og vise den med print stilark. Dette er en fornuftig tilnærming, bortsett fra at det er en stor ol 'smerte i baken for å håndtere hele tiden. La oss stole på jQuery å gjøre de tunge løftene i stedet.

CSS-018 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Twitter-Like Logg in med jQuery og CSS /> Dette innlegget forklarer hvordan du kan få Twitter-lignende skjule og viser effekten for å logge inn med jQuery og CSS. "Ganske enkelt bare fem linjer med JavaScript for hide() og show() arrangementer og litt CSS.

CSS-145 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Rengjør og Pure CSS Form Design /> Denne opplæringen illustrerer hvordan å designe en ren CSS form uten å bruke HTML-tabeller.

CSS-105 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

CSSG Samling: Gratis Kommentar Styles /> Dette er den andre CSSG samling fra CSS Globe.

CSS-034 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Ha en festdag med HTML5 Skjemaer /> Her er en titt på hvordan du kan style en vakker HTML5 form ved hjelp av noen avanserte CSS og den nyeste CSS3 teknikker. Du vil definitivt ønsker å re-stil skjemaene etter å ha lest denne artikkelen.

CSS-011 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Redigerbare / Utskrivbar faktura /> Opprett redigerbare og utskrivbare fakturaer ved hjelp av CSS og noe JavaScript. Dette er versjon 2 fra Vinh Pham.

CSS-047 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Hvordan Mask Passord likhet med iPhone /> Mange smartphones, inkludert iPhone, viser det siste tegnet du skrev inn i et passord felt med en forsinkelse på et sekund eller to. Du kan se at siste tegn, men ikke hele passordet. Men nettlesere ikke gjør hva disse mobile enhetene. Her er en løsning, med noen fancy JavaScript og bak-kulissene lureri.

CSS-074 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Gjør Web Forms Suck mindre med etiketter /> Vi har vært å fylle ut webskjemaer i årevis, og vi alle Gripe at de kunne bli bedre. Selv med generøse padding, feltene er for små. Men knapt noen har bedret seg de mest under-karakter samhandling av dem alle: sjekkheftet og radio knapper.

CSS-teknikk-20 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

FancyForm: JavaScript sjekkheftet erstatning /> FancyForm er en kraftig og fleksibel boksen-erstatning skript som endrer utseendet og funksjonen til HTML form elementer. Den er tilgjengelig og enkel å bruke, og det nedbrytes grasiøst på eldre ikke-støttede nettlesere.

CSS-103 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

jQuery boksen v.1.3.0 Beta 1 /> En lett tilpasset stil sjekkheftet implementeringen for jQuery 1.2.x og 1.3.x.

CSS-104 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Deaktivert etiketter og den Trilemma plug-in /> Skjemaet over til venstre gjør bruk av disabled attributtet, men standard nettleser for disabled inngangene ikke kontrasten så mye som man ønsker. For bedre å skille på et øyeblikk mellom hvilke innganger er deaktivert og aktivert, er etikettene til funksjonshemmede innsatsvarer i skjemaet til høyre stylet med en svak grå farge.

CSS-127 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Fluid søkeboks /> Opprette en væske søkefeltet når du har kun et enkelt element ved siden av er trivielt. Hva du bør gjøre er å pakke inn i et element og bruke padding til å lage plass til de faste element; plasser deretter faste element absolutt (eller relativt) i rommet opprettet av padding.

Siste klikk

Nettleser Pong /> En helt ny pong spillet ved hjelp av tre nettleservinduer for ballen og racquets. Flink!

CSS-180 i 50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Relaterte innlegg

Det kan være lurt å se på lignende CSS-relaterte innlegg som vi publiserte siste måneder:

(KK) (JB) (VF) (al)

/>

© Smashing Redaksjonelt for Smashing Magazine , 2010. | Permalink | 39 kommentarer | Legg til del.icio.us | Digg dette | Snuble på StumbleUpon! | Tweet det! | Send til reddit | Forum Smashing Magazine
Post tags: ,

50 Nyttige Coding Techniques (CSS utforminger, visuelle effekter og skjemaer)

Tags:

0 Kommentarer

Du kan bli den første til å legge igjen en kommentar.

Legg igjen en kommentar





XHTML: Du kan bruke disse kodene:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>