{"id":3571,"date":"2012-05-24T15:19:19","date_gmt":"2012-05-24T15:19:19","guid":{"rendered":"http:\/\/new.https:\/\/instantsocialsignals.com\/test\/?p=3571"},"modified":"2012-05-28T09:19:12","modified_gmt":"2012-05-28T09:19:12","slug":"css-generator-lage-div-tag-med-pil-design","status":"publish","type":"post","link":"https:\/\/instantsocialsignals.com\/test\/css-generator-lage-div-tag-med-pil-design","title":{"rendered":"CSS generator: Lage div-tag med pil-design"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Noen verkt\u00f8y er bare geniale, og dette er et slikt verkt\u00f8y jeg kom over slik plutselig. Det gj\u00f8r det veldig enkelt for deg \u00e5 lage CSS-baserte div-tags med pil, uten \u00e5 bruke bildefiler i det hele tatt. Fordelen er klar: Enkelt \u00e5 endre, raskt \u00e5 laste og enkelt \u00e5 bruke \ud83d\ude42<\/p>\n

Link ligger nederst saken.<\/p>\n

<\/p>\n

Du kan enkelt lage piler generert med CSS, og legge inn tekster som i en vanlig div.<\/p>\n

Slik bruker du den:<\/p>\n

    \n
  1. Velg om pilen skal v\u00e6re p\u00e5 toppen, p\u00e5 h\u00f8yre side, venstre side eller i bunnen<\/li>\n
  2. Velg st\u00f8rrelse p\u00e5 pil<\/li>\n
  3. Velg farge p\u00e5 bakgrunnen<\/li>\n
  4. Velg bredde p\u00e5 kantlinje<\/li>\n
  5. Velg farge p\u00e5 kantlinje.<\/li>\n
  6. Sjekk at den er slik du vil ha den<\/li>\n
  7. Kopier CSS og bruk den p\u00e5 din div<\/li>\n<\/ol>\n

    Dersom du ikke kan CSS s\u00e5 godt, s\u00e5 bruker du CSS-koden slik:<\/p>\n

    I HTML-koden: Opprett en <div> som du tillegger en CSS-klasse til som heter “arrow-box”. Alts\u00e5 slik:<\/p>\n

    <div class=”arrow_box”>Din tekst her <\/div><\/p><\/blockquote>\n

     <\/p>\n

    S\u00e5 limer du inn CSS-koden i ditt HTML-dokument, eller legger det i CSS-filen.<\/p>\n

    Dersom du legger det inn i HTML dokumentet, legg det f\u00f8r <\/head> og la det begynne med <style> og slutte med <\/style>.<\/p>\n

    Slik:<\/p>\n

    <style><\/p>\n

    .arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5; } .arrow_box:after, .arrow_box:before { bottom: 100%; border: solid transparent; content: \" \"; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-bottom-color: #88b7d5; border-width: 30px; left: 50%; margin-left: -30px; } .arrow_box:before { border-bottom-color: #c2e1f5; border-width: 36px; left: 50%; margin-left: -36px; }<\/code><\/p>\n

    <\/style><\/p><\/blockquote>\n

     <\/p>\n

    Da skal det bare v\u00e6re \u00e5 skrive inn teksten du vil ha i din div-tag, og resten gj\u00f8r seg selv \ud83d\ude42<\/p>\n

    CSS-pil-generator<\/a><\/p>\n

    Stilig, eller hva? – Har du tips til andre generatorer? Skriv det i kommentarfeltet under, eller i forumet \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"

    Noen verkt\u00f8y er bare geniale, og dette er et slikt verkt\u00f8y jeg kom over slik plutselig. Det gj\u00f8r det veldig enkelt for deg \u00e5 lage CSS-baserte div-tags med pil, uten \u00e5 bruke bildefiler i det hele tatt. Fordelen er klar: Enkelt \u00e5 endre, raskt \u00e5 laste og enkelt \u00e5 bruke \ud83d\ude42 Link ligger nederst saken.<\/p>\n","protected":false},"author":3,"featured_media":3572,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[13],"tags":[68,67,65,70,69],"_links":{"self":[{"href":"https:\/\/instantsocialsignals.com\/test\/wp-json\/wp\/v2\/posts\/3571"}],"collection":[{"href":"https:\/\/instantsocialsignals.com\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/instantsocialsignals.com\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/instantsocialsignals.com\/test\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/instantsocialsignals.com\/test\/wp-json\/wp\/v2\/comments?post=3571"}],"version-history":[{"count":10,"href":"https:\/\/instantsocialsignals.com\/test\/wp-json\/wp\/v2\/posts\/3571\/revisions"}],"predecessor-version":[{"id":3575,"href":"https:\/\/instantsocialsignals.com\/test\/wp-json\/wp\/v2\/posts\/3571\/revisions\/3575"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/instantsocialsignals.com\/test\/wp-json\/wp\/v2\/media\/3572"}],"wp:attachment":[{"href":"https:\/\/instantsocialsignals.com\/test\/wp-json\/wp\/v2\/media?parent=3571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/instantsocialsignals.com\/test\/wp-json\/wp\/v2\/categories?post=3571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/instantsocialsignals.com\/test\/wp-json\/wp\/v2\/tags?post=3571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}