[CSS] Flipcards

Unplugged's picture





CSS Flipcards


Base code for CSS flipcards for everyone, three presets. Free to use and alter as you wish.
Credit appreciated but not needed. If you have any questions let me know!
Remember to put the code under the cut, and set input format to BBCode.

Codes here:

Blue Forest (regular scrollbar)


Flowers (hidden scroll)


Skulls (hidden scroll)




Preview:





title 1




Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.







title 1




back






title 1




back











title 1




Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.







front


back






front


back










title 1




back







front


back






front


back



hb-k's picture

nice

nice
OshiBoo's picture

tracking

tracking

tracks these are sweet hot

tracks

these are sweet hot dang
Calinka's picture

damn, thank you so much!

damn, thank you so much!

8 ))))

8 ))))

Thank you, Tuo and Kohva!

Echosong's picture

woah

woah
TreeDancer's picture

Oooooo

Oooooo
IvyChain's picture

(No subject)

<3
ShrinkingRose's picture

CSS Magic .o.

CSS Magic .o.

These are really cool!

These are really cool! Thanks for sharing! Even though I'm not sure if I'll use them, because I don't know if they'll fit what I want for my character bios, but I'm considering trying something out just because these are so cool.
Mjrn's picture

Okay what. That is actually

Okay what.
That is actually really fucking cool. Definitely going to try this out.
Thank you so much for this.
Account previously Mjrn, returned to Veedeer.
Chizzune's picture

holy moly, yes thats

holy moly, yes thats awesome.
Tracking
_lioness_'s picture

mg! This is amazing!! *-* you

mg! This is amazing!! *-* you are doing so much for us all! These Flipcards are incredible! <3
*preserve this for myself on the future*
Mest
Shelby

Ooo tracking!

Ooo tracking!

kiwara's picture

Been trying to find these for

Been trying to find these for a while now, thank you!
Avatar © Squeegie & Siggy © Caiir + other
thelittleraven's picture

Magical. Thank you for

Magical. Thank you for sharing, ben!
Hraeth's picture

these are unreasonably fun,

these are unreasonably fun, thanks so much for sharing
HoneyDiva's picture

OOOOMG I LOVE U thanks a

OOOOMG I LOVE U
thanks a lot!! <3
Qanat's picture

LOVIN IT

LOVIN IT
Mauvable's picture

HNNNNNNNNNG NEED

HNNNNNNNNNG NEED
Kamaya's picture

Great job! Nice! c:

Great job! Nice! c:
Gustiro's picture

These are really neat,

These are really neat, Unplugged, love the idea of it. Thank you for sharing with us!

Question. Is there a way to make it flip and stick upon mouse over? And then it flips back only after you mouse over again?
Unplugged's picture

Gust, I'd probably have to

Gust, I'd probably have to rewrite the thing in javascript which i'm pretty horrible at. I'll look into it but i dont think i'll be able to.

Thank you everyone!
Bayleen's picture

These are so rad??? Tracking.

These are so rad??? Tracking.
mainpage

mmmm

mmmm
Gustiro's picture

Unplugged, Don't worry about

Unplugged,
Don't worry about it if it'll be too ... what's the word... intrusive? Just thought I'd ask.
Thanks though~ <3
tigerart27's picture

Ooo magic

Ooo magic
Kaoori's picture

awesome! CSS and i have a

awesome! CSS and i have a dislike for each other but i'll keep this in my files nonetheless. Smiling
Mjrn's picture

These are really fun to

These are really fun to interact with on mobile btw
Account previously Mjrn, returned to Veedeer.
oqu's picture

wow. stunning.

wow. stunning.
Thais's picture

awesome!!

awesome!!
Display pic by crabbycrown ♥
depstop's picture

absolutely yes!

absolutely yes!
Snowsauria's picture

Oh, I like these. c:

Oh, I like these. c:
Chromai's picture

ooh, fun!

ooh, fun!

yes pls

yes pls