#creative CSS

[josephkravis]

A Smile in Fragments

Masked happiness, smile with meaning, concealed joy

A Smile In Fragments In a fractured mosaic of shapes and bold hues, a smile emerges—distorted yet undeniably present, as if teasing the observer with layers of meaning. The jagged lines and vibrant colors weave between chaos and intention, concealing as much as they reveal. It’s a grin that exists at the edge of perception, both playful and unsettling, hinting at joy wrapped in…

[goombasa]

You Should Make a Personal Website

I don't mean a site to promote a business, or for financial purposes, or anything like that. No, I mean just a basic website about something you like. Make a site talking about a series you like to read or watch. Make a shrine to a ship that you enjoy. Make a weird, experimental, scattershot archive of your favorite gifs or weird fonts that you've collected over the years.

It's honestly a lot easier than you would think, despite what every single advertisement for Squarespace would have you believe.

First, why would you want to do this, making your own personal website if you don't have a big purpose for it? Well, back when the web was fresh and new, folks would just set up a web page just for the sake of sharing an interest that they had, or talking about some little nuance that they enjoyed. It could have been as broad or as simple as a person wanted, and like-minded sites, rather than vying for space on a search engine's front page, would be connected together with each other via things called web rings, basically a group of similarly themed websites that helped to promote each other just by virtue of being part of the same group. And then, of course, there were personal link collections, a massive dump of other sites that the webmaster thought were worth sharing that might lead outside the limits of any web ring they were a part of.

Beyond just sharing an interest or a passion with the world, regardless of how small or narrow it might seem to others, a web site is an experimental canvas to express yourself, your own little slice of the internet where you can do basically whatever you want with it. It doesn't have to be perfect, in fact perfection is something that should be ignored when it comes to your own vision. We've been trained to look at websites and see them as these incredibly slick, sleek looking, perfect and polished, suit-and-tie landing pages that are more just there to entice you into whatever a business is trying to see you. There are very few web pages out there in the major space of the web that pack as much personality as a thrown together Geocities site. Even sites that are attempting to have more of a laid back, casual aesthetic tend to be so precisely designed that it loses a lot of the magic of a site being built by an inexperienced hand, or someone who isn't interested in making something sleek and appealing. Yes, you want your site to be legible, at least, but the dearth of creativity in modern websites can't really be denied. So many of them look the same or use the same sort of default layout. Not saying that older sites didn't sometimes have similar layouts as well, but the odds of seeing at least a unique spin or font or color combination is much, much higher.

Compare that to where most folks will gather to share their creations nowadays, social media sites. In general, the creative freedom that you have over, say, a twitter profile or a facebook page, is very limited and in general, your stuff is basically just put into a big feed that folks will scroll over or past as they flip along their phones.

But don't you have to know how to program or write code to make a really impressive website? After all, we have tons of services like Squarespace and Wix and the plugin market for things like Wordpress that are meant to make the arduous process of building a site as quick, easy, and painless as possible.

Speaking of someone who works on a Wix site as part of my day job, I hate things like their drag-and-drop interface. It is, at least from my experience, slow and clunky and despite the variety of options presenting to you, most of them feel very limited and samey, with little room for individual expression. Add to it, they also show you a lot of options that you can't access if you aren't paying for certain tiers of service, so there is also an element of upselling to their services that I really don't appreciate.

When it comes to building a personal site, all you really need to know is HTML, CSS, and a little bit of Java, but only if you want the site to have some cute little interactive elements, which are totally optional. HTML is honestly super easy to learn, because it's not even really a coding laguage, it's more of a language for structure. You wrap things in specific tags that tell the text how to present itself. HTML on its own is very easy to learn and there isn't a huge amount too it, but it is very ugly on its own.

That's where CSS comes in. Not going to front, CSS is, for me, the most confusing part of the process. It's important, but it's also overwhelming. CSS is is a LOT looser in terms of its setup compared to HTML and is meant to do a lot more; it is used to alter the font, the color, how pictures look, the placement of text and elements, the shape of buttons and links, everything about how a website looks beyond its very basic structure, which is built off of HTML.

Beyond that, if you do want to have some fun little widgets here and there, a little bit of Javascript can help add a bit of pizzazz to your site, but it is far from necessary, especially if you're still learning. You're allowed to be sloppy and imperfect, you are allowed to make something that isn't visually cohesive or even all that appealing at first. You are learning. You are making something for fun, or because you enjoy it, or enjoy what you're trying to communicate.  Learn HTML, take your time learning CSS, and then after you've had some fun getting to grips with the absolute basics of that, then think about spicing it up after the fact.

And again, it's not like this is tough to learn, or at least not tough to find resources on the subject. I'll be linking to a bunch of various resources for this sort of stuff. And hey, if you don't want to code an entire web page or website from scratch, there are plenty of places to grab pretty detailed templates of elements for your site, or even full pages that you then can just inject your writing or pictures or links into without having to go through the whole situation yourself. This can also be useful for a beginner because it allows you to see exactly how the HTML and CSS is used to create a specific effect, and gives you something you can experiment with and see results on without having to build it from scratch, which is a handy learning experience.

And where would you put your brand new site once you've put it together. Well, Wordpress does allow traditional HTML sites to be put up, but they're more about making those slick, eye-popping websites that we've discussed before. You could also just pay for a domain name and some hosting and then suss it out from there, but you do have a few places where, rather than putting in a substantial investment, you can throw up a site for basically nothing and still have plenty of room to experiment with your site and make something fun and interesting.

My personal recommendation is Neocities, a Geocities-inspired service that very much wants to bring back the idea of the personal website and web rings in general. They are completely free to use, and focus specifically on HTML pages. They do have a paid tier, which is only five dollars, that does give you a bunch of added features, including the ability to host multiple sites, fifty gigs of story as opposed to one (which might not seem like a lot, but a basic HTML website which is mostly text will almost never come close to that amount of storage, and the ability to give your site a custom domain (though you will have to buy that separately). I mostly recommend Neocities because their entire mission statement is what I've been talking about here; bringing back the creative freedom of having your own playground to toy with however you wish, and experiment with making something that just looks funky, in the best way possible. Plus, it gives an excuse to brows through all the other stuff that people have been putting up as well.

So do it. Even if it's just as a little hobby or a side project, give it a go. You have nothing to lose and might even pick up a skill you really enjoy flexing. Who knows, it might even lead you down a new path, or at the very least give you a creative outlet that you weren't aware of beforehand. It's well worth the effort.

Now, let's round this out with a quick list of some various sources that can help you in your quest to design that which lies in your heart, yeah?

W3 Schools: This is more a straight up reference site, and you can find tutorials here on a ton of different programming languages, but their HTML and CSS section is very robust, and will show you examples of various commands and tags and how they work. I find it's layout a little bit confusing at times, but it's a good place to go back to when you're looking for examples on how specific tags or commands work.

Sadgirl Online: This is basically a one-stop shop for tons of references and resources for making a website. It not only has a bunch of free assets like fonts and backgrounds that you can use in your own projects, but it also has a section for learning HTML and CSS that gives some very detailed explanations on how everything works, and even has a website generator that will generate a web page template for you to use in your own projects. Sadly, the site itself is no longer actively updated, but everything on it is still in working order, and most of the information on it is very timeless. The link section is also invaulable in finding more tools and resources as well. At the very least, I'd say it's an excellent starting point for any aspiring website builder.

Word to HTML: If you really don't feel comfortable writing out your own HTML, you can use this tool to quickly paste in things that you wrote in Word, or other formatting programs, and turn it into HTML that will keep the formatting, such as text position and style. Useful for if you're writing stories or long-form blog posts and you don't want to manually put in line breaks or paragraph tags yourself.

Web Guide: A basic and straightforward text tutorial on how to begin building a website based on HTML and CSS. It's even a site that was made and hosted on Neocities! It's another really good starting point if you need to figure out the very basics of HTML and CSS.

Color Hex: Once you start getting into the depths of CSS, you'll want to familiarize yourself with the hexadecimal codes for colors, since the pre-baked colors you can access otherwise are pretty basic and limited. Color Hex will show you popular colors with hexadecimal numbers, and can also general color palettes for you that will either contrast sharply, or look very nice together, which might help inspire the look and feel of your website.

[seafoodsoda]

I love going into the page source and css of websites and find out the programmer left a note like "hey good job getting in here bud!" and maybe it's sarcastic but like

Thank you yes I AM smart and pretty and smart, he he 💖💝💖💝💖💝💖💝🌟🌟🌟

[jwt5000]

screengrabs from my WIP, im enjoying the artistic perspective until i make it functional, i prefer it. happy to be learning accurate and accessibility friendly site-building though.

[anadventuregallery]

My website is 'An Adventure Gallery':

When I say this about my website, I am both naming and describing it.

'An Adventure Gallery' has two main functions: it provides me a digital place to showcase some of my own visual artworks alongside some of my favorite music on Spotify, and it also functions as a story telling device (in the style of a "Choose Your Own Adventure") where branching plots carry on from one choice to the next page.

An unintended side-effect of this is that I'm forced to reckon with HTML and CSS. So,  perusing through the pages can prove interesting on a number of levels-- one of them being my fiendish attempts to take over your senses with styled animations and whatever other trickery I can manage wielding only CSS code.

It's a wild ride through the Abyss, but I encourage you to begin! :)

~ Trish

[codingflicks]

Creative Codepen CSS Animation Snippets

[artmasiah]

It's not perfect but I finally got the layout to work how I want it to. Resizing should now look good on both desktop and mobile⭐

[lairai]

2022 Art Summary

I've never been super keen on the "gallery-style" image/art summaries that people often do, because I a) never have enough art to give each month its own piece and b) I can never figure out a layout I like. So I decided to instead do a sort of "look back at 2022", in text form with images where it matters.

Beginning of the year

This year was a wild ride for me, art-wise! I took a landscape-painting course at the beginning of the year (I'd love to recommend it but it's on Wingfox which, last I checked, was borderline unusable, so until they make it work I can't recommend people spend money on stuff there), and did a bunch of landscape commissions. Here are two I'm particularly happy with! (Watermarked because due to the way backgrounds are formatted in ARPGs they don't have my signature)

I decided to try using gamut masks for my colour palettes instead of just kinda winging it based on a handful of reference images. I know not many people use them, probably due to how many steps they add to an art piece, but I've always kind of struggled with having the confidence to use less 'usual' colours in my paintings so they really helped.

Summer (kinda)

And then my old PC died! :') I had been looking to replace or upgrade it for a long time but never quite had the time for it, so I guess it decided to do me one last favour and completely cease to work so I could finally get myself to buy a new one (after 5+ years of owning this one). It took weeks to replace it, which I think was the longest time I spent without drawing in... quite a while. Eventually, as we learned it would take longer and longer for the new PC to be assembled, I moved my drawing tablet to a different PC temporarily and started working on a particularly ambitious piece:

I am honestly so proud of this image - both because I like how it turned out overall, and because drawing these two was the one thing that really made me want to learn how to draw people (and, more specifically, men). I had done the usual "pose studies, quick sketches, anatomy studies, looking at references" routine, but I always dropped it because I just didn't have the motivation to keep learning something I saw I was so obviously bad at initially. But then in Realm of Serpents, these two happened, with just the cutest story that somehow wrote itself without anyone planning it beforehand. And I just had to draw them. So here we are.

Autumn

In autumn, in a group I help run, we launched the biggest change the game has ever received: we gave it a lore-based, story-focused progression system. If you're not in any ARPGs or aren't familiar with how they work, this might mean very little to you, but just imagine like a year and a half of writing, 80k+ words, and art assets on art assets on art assets. I'm very proud of how some of these turned out. They had to be done in just a few hours each for me to get everything finished on time, and for how little time I had to spend on them, I'm not unhappy with their final look:

Winter

Winter was busy. Partially I was really tired from finishing the project I mentioned above, partially I was writing my second BA thesis on top of studying at a second uni for a completely different degree. I didn't get a lot done, but that didn't stop me from sketching my two favourite Fools Who Are Terribly In Love:

And now we're here! I tried a lot of new things with my art this year. I'm still getting the hang of human anatomy, and I know some of my human sketches look a bit wonky still. But I think diving into a new subject, knowing you won't get it right the first dozen (or hundred!) times but also knowing it'll pay off in the end, is kind of what art is all about. Happy New Year!

[jcmarchi]

Beautiful Poster Art Created with CSS & JavaScript – Speckyboy

New Post has been published on https://thedigitalinsider.com/beautiful-poster-art-created-with-css-javascript-speckyboy/

Beautiful Poster Art Created with CSS & JavaScript – Speckyboy

Posters are among the most common art forms. You probably had a few of them on your wall as a child. They cover the full spectrum of people, places, and events.

They also serve as an inspiration for web designers. Their use of color and typography is part of how we see the world. We can see the impact all over the web.

What’s more, we can recreate and enhance the experience online. Goodies like 3D effects and animation bring posters to life. There’s also an element of interactivity. That can be just as powerful as a bold layout.

We wanted to see how designers are using their creativity. So, we perused the archives of CodePen for beautiful poster art. Here are some examples that use CSS, JavaScript, and other technologies. Enjoy!

Unlimited Downloads for Web Designers

Starting at just $16.50 per month, download 1,000s of HTML, Bootstrap, and Tailwind CSS, as well as WordPress themes and plugins with Envato Elements. You will also get unlimited access to millions of design assets, photos, video files, fonts, presets, addons, and much more.

Furiosa 3D Animated CSS Poster by Olivier 3lanc

Talk about a poster that’s brimming with life! This 3D rendering places the movie’s characters in a cut-out. The entire presentation looks like a diorama. Everything is powered by CSS – no JavaScript in sight.

See the Pen FURIOSA 3D Animated Poster by Olivier 3lanc

Replicating & Animating Zürich Tonhalle’s Poster by Jon Yablonski

This snippet is part of a project that recreates iconic posters. The beauty here is in the minimal layout and bold typography. Animated lines add a modern touch to this classic.

See the Pen Zürich Tonhalle (1955) by Jon Yablonski

CSS Grid Poster Exercise by Victoria Bergquist

A combination of Flexbox and CSS Grid fuels this example. The variation of shapes would seem nearly impossible to do without these tools. The included splash of color makes for a compelling result.

See the Pen CSS Grid Poster Exercise 1 by Victoria Bergquist

Donkey Kong Poster Collection by Daniel Fontes

Here’s a fun tribute to the past. Gamers will instantly recognize this series of images from Donkey Kong. The classic video game posters feature a fun lighting feature. Tug on the chain to illuminate your favorite poster. Bonus points for the flicker effect!

See the Pen Donkey Kong – a small poster collection by Daniel Fontes

PPL MVR CSS & SVG Poster Designby Kristopher Van Sant

Band posters are a common theme among designers. Perhaps that’s because so many of us have them on our walls. This animated sequence takes inspiration from print artwork. And it’s another example of what CSS is capable of.

See the Pen PPL MVR by Kristopher Van Sant

Grid Duotone Gradient Poster Design by Cassie Evans

The power of CSS Grid is real. The poster is beautiful and complex. Most impressively, the styles consist of less than 200 lines. A little code and a lot of imagination can go a long way.

See the Pen Grid Poster by Cassie Evans

Grunge Poster with the Wave Motion Effect by ilithya

Who can resist the retro vibes coming from this poster? It captures the look of the 1990s – complete with raining triangles. Move your cursor to change the perspective of the photo. It’s a far-out experience, for sure.

See the Pen Grunge Poster by ilithya

The Matrix Resurrections Digital Poster by Sparklingman

The Matrix movie series is known for a different kind of rain. This digital poster may appear simple. However, clicking on it shifts the green and black pattern. The effect is subtle – but fits beautifully with the movie’s aesthetic.

See the Pen The Matrix Resurrections | Sparklingman digital poster #026 by Sparklingman

A New Take on a Classic Art Form

The examples above combine classic print sensibilities with online capabilities. It’s a fun exercise that goes beyond what’s hanging on your wall.

We may think of posters as being simplistic. But they also open a world of possibilities for designers. Thus, we can take this inspiration and run with it.

For example, posters may help us rethink traditional web layouts. Elements like vertical text and unique container shapes come to mind. They can serve as a launching pad for ideas.

Want to see more examples of online poster art? Check out our CodePen collection!

Related Topics

Top

[hua-fei-hua]

sites that let you use custom css are underrated. i love making shit on the web behave the way i want it to and i love when i don't have to use a browser extension to apply those modifications

[donotdestroy]

WordPress 6.6 - Huge Changes Coming Soon!

[grey-space-computing]

Elevate your business with Grey Space Computing's Drupal web development services. We specialize in crafting websites that are not only visually appealing but also highly functional and secure. Our team is committed to delivering solutions that drive results. From initial design to final deployment, we've got you covered. Trust us to handle all your Drupal development needs. 🔗Learn more: https://greyspacecomputing.com/drupal-web-dev/    📧 Contact us: https://greyspacecomputing.com/contact-us/

[scopethings-blog]

Scope Computers

Join Online & Offline Course

Admission Open

Contact us: +91 85600 00535

[agentromanoffsir]

neocities guide - why you should build your own html website

do you miss the charm of the 90s/00s web where sites had actual personality instead of the same minimalistic theme? are you feeling drained by social media and the constant corporate monopoly of your data and time? do you want to be excited about the internet again? try neocities!!

what is neocities?

neocities is a free hosting website that lets you build your own html website from scratch, with total creative control. in their own words: "we are tired of living in an online world where people are isolated from each other on boring, generic social networks that don't let us truly express ourselves. it's time we took back our personalities from these sterilized, lifeless, monetized, data mined, monitored addiction machines and let our creativity flourish again."

why should I make my own website?

web3 has been overtaken by capitalism & conformity. websites that once were meant to be fun online social spaces now exist solely to steal your data and sell you things. it sucks!! building a personal site is a great way to express yourself and take control of your online experience.

what would I even put on a website?

the best part about making your own site is that you can do literally whatever the hell you want! focus on a specific subject or make it a wild collection of all your interests. share your art! make a shrine for one of your interests! post a picture of every bird you see when you step outside! make a collection of your favorite blinkies! the world is your oyster !! here are some cool example sites to inspire you: recently updated neocities sites | it can be fun to just look through these and browse people's content! space bar | local interstellar dive bar creature feature | halloween & monsters big gulp supreme peanutbuttaz | personal site dragodiluna linwood | personal site patho grove | personal site

getting started: neocities/html guide

sound interesting? here are some guides to help you get started, especially if you aren't familiar with html/css sadgrl.online webmastery | a fantastic resource for getting started with html & web revival. also has a layout builder that you can use to start with in case starting from scratch is too intimidating web design in 4 minutes | good for learning coding basics w3schools | html tutorials templaterr | demo & html for basic web elements eggramen test pages | css page templates to get started with sadgrl background tiles | bg tiles rivendell background tiles | more free bg tiles

fun stuff to add to your site

want your site to be cool? here's some fun stuff that i've found blinkies-cafe | fantastic blinkie maker! (run by @transbro & @graphics-cafe) gificities | internet archive of 90s/00s web gifs internet bumper stickers | web bumper stickers momg | gif gallery 99 gif shop | 3d gifs 123 guestbook | add a guestbook for people to leave messages cbox | add a live chat box moon phases | track the phases of the moon gifypet | a little clickable page pet adopt a shroom | mushroom page pet tamaNOTchi | virtual pet crossword puzzle | daily crossword imood | track your mood neko | cute cat that chases your mouse pollcode | custom poll maker website hit counter | track how many visitors you have

web revival manifestos & communities

also, there's actually a pretty cool community of people out there who want to bring joy back to the web! melonland project | web project/community celebrating individual & joyful online experiences. Also has an online forum melonland intro to web revival | what is web revival? melonking manifesto | status cafe | share your current status nightfall city | online community onio.cafe | leave a message and enjoy the ambiance sadgrl internet manifesto | yesterweb internet manifesto | sadly defunct, still a great resource reclaiming online social spaces | great manifesto on cultivating your online experience

in conclusion

i want everyone to make a neocities site because it's fun af and i love seeing everyone's weird personal sites that they made outside of the control of capitalism :) say hi to me on neocities

[blue-hi]

how i think things will fall when it comes to my favorite class by the end of the semester

[websitiasworld]

Celestial Dreams: A Daily Planner Diary for Inspired Living

"Welcome to 'Celestial Dreams,' your daily companion for inspired living! Embrace the magic of each day with this beautifully designed planner diary, featuring celestial-themed artwork and motivational prompts to fuel your journey towards your dreams. Size - (21cm * 29.7cm) pdf formate

Inside 'Celestial Dreams,' you'll find:

Schedule Section: Organize your tasks, appointments, and priorities for each day, ensuring you stay on track and focused on your goals. Self-Care Section: Cultivate a mindset of gratitude by reflecting on the blessings in your life and expressing appreciation for the little joys. Habits Section: Boost your confidence and motivation with empowering affirmations that inspire positivity and self-belief. Notes Section: Capture your thoughts, ideas, and inspirations in the spacious notes section, allowing creativity to flow freely.

link - https://payhip.com/b/HEAUq