#blob html css

[divinector]

CSS Animated Blob

[themightyloser]

I like how I find it more enjoyable to do web development instead of drawing now

like, how, programming shouldn't be this fun

[black7375]

Knuth-Plass 줄바꿈 알고리즘

https://tex.stackexchange.com/questions/230668/any-progress-on-knuth-plass-algorithm

https://bugzilla.mozilla.org/show_bug.cgi?id=630181

https://defoe.sourceforge.net/folio/knuth-plass.html

https://elliotjaystocks.com/blog/justification-hyphenation/

https://github.com/jaroslov/knuth-plass-thoughts/blob/master/plass.md

https://mpetroff.net/2020/05/pre-calculated-line-breaks-for-html-css/

https://github.com/robertknight/tex-linebreak

https://github.com/bramstein/typeset

[cssmonster]

Explore 15+ Interactive CSS Bubbles for Your Web Projects

Dive into our refreshed compilation of carefully selected HTML and CSS bubble code examples. This comprehensive resource features a diverse range of bubbles from renowned platforms like CodePen, GitHub, and more. With our September 2023 update, we're thrilled to present eight new bubble designs that embody the latest web design trends and innovations. Whether you're a web developer seeking inspiration or a designer in search of ready-to-use bubble code snippets, this article has you covered. Incorporate these CSS bubbles into your website to infuse interactivity and playfulness, delivering a delightful user experience. Join us on this exploration of the world of CSS bubbles, where creativity seamlessly combines with functionality and design to elevate your projects. Related Articles: - Explore 24 Dynamic CSS Blob Effects

Author Rahul Goswami July 8, 2023 Links Demo and Code Download Made with HTML / CSS About a Code CSS Bubble Effect Immerse your web projects in the captivating world of a singular CSS bubble effect. Explore creative possibilities to add interactivity and playfulness, enhancing the user experience with this delightful design detail. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author theUnnamedRd September 24, 2021 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code CSS Bubble Dive into the world of a singular CSS bubble. Explore creative ways to add interactivity and playfulness, enhancing your web design with this delightful detail. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Diyorbek Olimov August 21, 2021 Links Demo and Code Download Made with HTML / CSS About a Code Bubble Background Animation Transform your web design with a captivating singular detail—an animated bubble background. Dive into this creative element to add interactivity and a playful touch, enhancing the user experience with delightful visual effects. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Trevor Knutson June 16, 2021 Links Demo and Code Download Made with HTML / CSS About a Code Creative CSS Bubble Dive into the world of a singular CSS bubble—a delightful design detail that adds interactivity and playfulness to your web projects. Explore creative possibilities and enhance the user experience effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Pratham May 7, 2021 Links Demo and Code Download Made with HTML / CSS About a Code Dropmorphism UI Dive into the world of Dropmorphism UI design, a singular detail that brings a sleek and modern touch to your web projects. Explore the creative potential of this unique design element to enhance your user interface with style and elegance. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Jon Kantner February 12, 2021 Links Demo and Code Download Made with HTML (Pug) / CSS About a Code Bubble Wrap Checkbox Effect Experience the creativity of a singular detail—a functional cluster of checkboxes designed to resemble a sheet of bubble wrap. This unique effect utilizes an input element for the initial state and a span element to replace it for the "popped" state. Explore this playful design detail to enhance user interaction and engagement in your web projects. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Jelilicent January 10, 2021 Links Demo and Code Download Made with HTML / CSS About a Code Jelly Bubble CSS Effect Dive into the mesmerizing world of a singular jelly bubble CSS effect. Explore creative ways to add this playful design detail to your web projects, infusing them with interactivity and a delightful user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Jon Kantner October 23, 2020 Links Demo and Code Download Made with HTML / CSS About a Code Toggle Bubble Button Dive into the world of the toggle bubble—a unique button design resembling a bubble with a dynamic donut that transforms into "0" or "1." Explore how this singular detail can add interactive charm to your web projects, providing an engaging user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Wendy Kong June 13, 2020 Links Demo and Code Download Made with HTML / CSS About a Code Breathing Exercise with Bunny & Bubbles Engage in a unique breathing exercise with a bunny-themed toggle button. This interactive design detail features a bubble that transforms into a "0" or "1" donut, offering a playful and mindful experience to boost your well-being. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Melanie Hoek June 9, 2020 Links Demo and Code Download Made with HTML (Pug) / CSS (SCSS) About a Code CSS Bubbling Experiment Dive into an intriguing singular CSS bubbling experiment, exploring creative ways to add interactivity and dynamic effects to your web projects. Discover the magic of this unique design detail for an engaging user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author MenSeb April 25, 2019 Links Demo and Code Download Made with HTML (Pug) / CSS (SCSS) About a Code CSS Bubble Sort Dive into a unique CSS experience with a singular bubble sort implementation, created entirely with SCSS. Explore this example, featuring functions, mixins, animations, and pseudo-elements, to enhance your web design with a dynamic and interactive element. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author LoFi April 3, 2019 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code Squishy CSS Bubble Dive into the whimsical world of a singular squishy CSS bubble effect. Discover creative ways to incorporate this playful design detail into your web projects, adding a touch of interactivity and delight to the user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Marko November 5, 2018 Links Demo and Code Download Made with HTML (Haml) / CSS (SCSS) About a Code Random CSS Bubble Background Create an engaging singular design detail with a random CSS bubble background. Explore this creative addition to infuse your web projects with dynamic visuals and a touch of playfulness, enhancing the user experience effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Emily Goldfein April 25, 2017 Links Demo and Code Download Made with HTML / CSS About a Code Submarine & Bubble CSS Effect Dive deep into web design creativity with a singular submarine and bubble CSS effect. Explore the magic of this unique design detail, infusing your projects with interactivity and underwater charm for an engaging user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Emily Goldfein April 25, 2017 Links Demo and Code Download Made with HTML (Haml) / CSS (Stylus) About a Code Random Moving Bubble Effect Explore a simple yet captivating singular detail—a random moving bubble effect that mimics the playful motion of soda bubbles. Incorporate this creative snippet into your web design to add an engaging and dynamic touch to your website effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Felix Hornoiu October 23, 2014 Links Demo and Code Download Made with HTML / CSS About a Code Bubble Trouble CSS Effect Dive into the captivating world of a singular CSS effect known as "Bubble Trouble." Explore how this creative detail adds a touch of interactivity and playfulness to your web design, creating a delightful user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author Kévin Chassagne August 28, 2014 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code CSS3 Bubble Effect Dive into the world of a singular CSS3 bubble effect, adding interactivity and playful design elements to your web projects. Explore the creative potential of this delightful detail for an enhanced user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Avaz Bokiev August 7, 2012 Links Demo and Code Download Made with HTML / CSS About a Code Pure CSS Animated Bubble and Mac Dive into the world of a singular animated bubble and Mac effect created entirely with CSS. Explore the creativity and innovation behind this unique design detail for a captivating web experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Read the full article

[pulipuli]

看看網頁版全文 ⇨ 用Docker建置具備HTTPS的NGINX反向代理伺服器：docker-HTTPS-Reverse-Proxy / Build a NGINX Reverse Proxy with HTTPS in Docker: docker-HTTPS-Reverse-Proxy https://blog.pulipuli.info/2023/04/blog-post_10.html 直接設定NGINX實在是太複雜了，那我們用Docker把複雜的內容都包裝起來，只追求最簡單的設定即可。 ---- # docker-HTTPS-Reverse-Proxy。 https://github.com/pulipulichen/docker-HTTPS-Reverse-Proxy。 docker-HTTPS-Reverse-Proxy是我為了將NGINX建置成理想的反向代理伺服器所開發的專案。 其主要的特點有：。 - 反向代理伺服器 (reverse proxy)：在後端伺服器(backend)前面架設一層緩衝伺服器使用。 - 負載平衡 (loaidng balancing)：如果設定多個後端伺服器，則流量會自動分配給它們使用。 - 自動快取與壓縮：大部分靜態資源，例如JavaScript、CSS、圖片、聲音與影片，都會被自動快取和壓縮。 - 隱藏伺服器資訊：Server、X-Powered-By等標頭會被自動移除。錯誤訊息的網頁也被簡化，讓人完全看不出這是什麼伺服器。 - 流量限制：避免DDoS攻擊。 - SSL憑證：分析後端伺服器的設定，使用certbot申請憑證並且安裝，每30天進行更新，一切全自動。 - 虛擬主機：根據域名判斷後端伺服器。 # 環境 / Environment docker-HTTPS-Reverse-Proxy是以Docker為主。 下載檔案需要用到git。 部分腳本使用了只能在Linux運作的bash。 最難克服的應該只有Docker引擎的部分。 關於Docker的安裝，請看Install Docker Engine。 除了Docker引擎之外，還需要安裝docker-compose，詳細請看「Install the Compose standalone」。 # 使用方法 / Usage 首先我們要將docker-HTTPS-Reverse-Proxy用git複製到本地端：。 [Code...] 再來是複製./conf/backends.sample.yml為./conf/backends.yml，然後修改它。 [Code...] https://github.com/pulipulichen/docker-HTTPS-Reverse-Proxy/blob/main/conf/backends.sample.yml。 backends.yml是以YAML的格式撰寫。 ---- 繼續閱讀 ⇨ 用Docker建置具備HTTPS的NGINX反向代理伺服器：docker-HTTPS-Reverse-Proxy / Build a NGINX Reverse Proxy with HTTPS in Docker: docker-HTTPS-Reverse-Proxy https://blog.pulipuli.info/2023/04/blog-post_10.html

[codenewbies]

CSS only Blob Animation Learn more from codenewbies YouTube channel

[mournstera]

Creating Tumblr themes: Websites or tools you might not have heard of

There are several posts and pages on how to create Tumblr themes. I figured I'd add some links and tools that I haven't really seen on this hellsite. Enjoy!

Chrome Devtools — This is an obvious one to point out to some, but I don't wanna leave it out. Right click and inspect on a website! "live edit" your CSS and HTML and watch it take action immediately. Just remember to copy the html/CSS into your theme before refreshing ;) I've used similar tools on Firefox since 2010, never looked back. devtools is powerful as fuck, but you don't need to know everything before diving into it.

Prettier.io — "An opinionated code formatter." Use the online playground to check your scripts or neatly fix and arrange your CSS. Or just HTML. It can also be installed in VS Code easily, which I highly recommend.

Coolors.co — colour patterns, gradients, create colour schemes from images, check for accessibility, and so much more.

Lucide Icons — the popular Feather icons just got an upgrade, so many Icons! Go here to see how to integrate it in your themes.

Neumorphism.io — What it says on the tin.

uiverse.io — Universe of UI elements to help you stand out. Great source of inspiration as well.

Fancy Border Radius Generator — Because why settle with squares?

Blob generator — if fancy Border radius isn't enough. Generator of much more than blobs, by the way! Check it out.

Open Props: Sub-atomic styles — Supercharged CSS variables.

Modern CSS Reset — better than Eric Meyer's.

Subtle patterns — been using this for over a decade.

CodeMyUI — repository for CSS snippets.

Codepad — a place for developers to share code snippets: PHP, Java, Bash, C, C++, Python and more.

Mesh Gradient Collection — because it's pretty.

WAVE — Check how your website/theme holds up accessibility-wise. Spoiler alert: get into aria-labels.

Feel free to message me more, and I'll add it to the post.

[code-es]

Codeblr tag game - realization

@a-fox-studies thank you for tagging me in this!!

At what point in your life did you decide that the world of computers was the one for you?

Heh this is a long one... So read if u want to know some code-es lore :p

But tldr: My dad was a software/computer engineer and his dedication and working spirit is my biggest inspiration, but programming was never a passion of mine - languages were my big thing. This was until I took a programming course and realized that programming is just like learning languages, but with rules that actually apply.

I want to tag: @xiacodes @web-dev-with-bea @compooter-blob @alica-tech @lazar-codes @zoeythebee @cloudycodes @04kid

Programming was always around me when i was younger. My father was a software systems engineer, so when i was a kid i would see him work on matrix looking code, and sometimes he'd even let me press buttons!

But i wasn't really interested in learning anything about computers... I was instead interested in art and especially languages, which was my biggest interest and passion. Then my dad passed away, and following that I'd get more and more interested in programming during my teens, partly to honor him and my family, because on my dad's side almost everyone's a software engineer. I also had an email friend I met on omegle when i was 14-15, and he was 30 something, which... now that i think of it, it was probably pretty a little weird that he wanted to be my friend... but anyways, he was a software engineer and explained what coding/programming was and following that I made my first webpage using only HTML and CSS, in my notepad hahaha!!

But... I didn't do much after that, until I was in my second last year of high school. I signed up to take a programming course for my next and final year. I've always been curious, and wanted all the knowledge I could get, so when a programming course was offered I had to take it! But it was just another small drop in my big lake of interests.

I don't think I realized that computers and programming was what I wanted to do until I visited my family in Mexico 2 years ago, weeks before starting that programming course. For some reason I always saw programming and computers as something out of my reach - i couldn't possibly learn this. However, to prove me wrong, my cousin, who studied software development at the time, showed me his projects, and what he was doing. And, I realized that omg - I could also be doing this? It's within reach!

And then I started learning python in school and I was kind of discouraged, it was so difficult! Most people had previous experience, and seeing what they could already do I felt overwhelmed, thinking I should also be doing that. But I kept coming back to the thought that this is just like learning a language: if I just expose myself to more and more content it will start making sense, and sooner or later I'll be able to form my own sentences and the computer will listen to me.

I've always loved the logic of languages, how the syntax is built, and how verbs are conjugated in accordance to gender, numerus and time in different languages. But... there are always exepctions and irregularities you just have to learn. However, programming is all logic, everything has an explanation, even the seemingly inexplicable concepts. There is always a solution, and my creativity is the limit, and that is what keeps me going.

And then! I was looking at university educations to apply for, when on a whim I found out about my current school, checked what courses they offer and saw something about frontend development. I read the description, and realized that oh my god - this is my type of programming! I get to do design and art AND code? And since studying here, I have realized that, yeah, this is exactly my field, and I love computers and I just want to learn more and more and more, always, and there are so many rabbit holes to fall into within programming.

During my time in school, I would envision myself working with something static in the future; like just going to uni, learning a job, and then doing it. Then, I remember being on studyblr, and seeing the quote "now is the only time in your life when your full time job is to learn" and I took it to heart, and that is what kept me motivated - I thought, what a privilege to just learn for a living. And that is exactly what working with software will be (:

My biggest weakness is finishing writing shit lol, my feedback in on essays was always: ok great, but dont have 3 different points where we think its gonna end but we're met with yet another finishing paragraph. So I'll just end it quickly here, thank you for reading!

[themekets]

Customizable Audio Player

There's probably at least a few of these kicking about nowadays, but so far none of them have suited mine or my wife's purposes well enough.

So here we are, I made my own.

Github Link

Follow the instructions in the readme to get started. I'll be keeping the links in there up to date as I make any necessary changes, so refer to that for up to date information.

The player consists of a couple of pieces:

HTML code for the player's visual elements on the page and the audio playlist.

Javascript for the player's operation.

CSS code for the player visuals, with some provision for simplified adjustments to fit whatever theme you need.

Because the player essentially just becomes part of your Tumblr theme itself, you have full control over how it looks. I've given it some base styling to make it usable as-is, but if you want to completely change how it looks, where it goes, that's entirely up to you.

If you have specific needs that are't met with this implementation, feel free to file a Github issue or just send me an ask. I'm much more active on Github than I am here, though, so those will tend to get seen more quickly.

If you want to submit your own custom themes for the player for others to use, that's where I'd ask you submit them to as well, please!

Of course, you're more than free to send asks if you run into any difficulty using it.

[ineffablefool]

How to center and nice-size an image in an AO3 fic using a work skin

Maybe someone can use this?  In my fic for the DIWS Good Omens Mini Bang, I embedded some images from my wonderful illustrator.  The centered images will never be wider than the text, no matter the screen size, but they also are never stretched larger than their native size (I resized ‘em to 800px wide in my trusty paint program for faster downloading). Here’s how one looks on my giant monitor and on my phone screen:

If you have never done AO3 skins before then I promise they are not actually scary!  You have the option of doing relatively complicated things with them, but this thing is simple.

Anyway this is how I center my images.

Step one: make a skin.

In your AO3 dashboard, click “Skins” in the menu (left or top of page, depending on if you’re on a big or small screen).  This takes you to the Site Skins page, which are for if you want to make all of AO3 look different to just you.  You want a Work Skin, though, which makes your fic look different to everyone, so click My Work Skins.

Click Create Work Skin in the top right and you’ll get an editor that’s similar to when you’re posting a fic!  You only need to set two things.  One, give it a title that makes sense to you (the title won’t be visible to people reading your fic).  Two, paste some stuff into the big “CSS” box.

This is the stuff to paste:

.centered {  margin-left: auto;  margin-right: auto;  text-align: center; }

.centered img {  max-width: 100% !important; }

That was the stuff to paste!  Just toss both of those two blobs in the big editor and click Submit.  Now you have a skin!

Step two: use the skin in your work.

Open up the work you want to do this in.  Find the Select Work Skin box (just under the Choose A Language box) and select the skin you just made.  Yay!  Sorry, the Homestuck and Undertale ones are just there for everyone and that’s how it is.  (Nothing against Homestuck or Undertale.  I just don’t like unneeded entries in lists.)

Step three: center your image.

This is the most complicated bit, only because I can’t give you an exact thing to copy-paste.  But I can give you a basic template!  Don’t try to paste this into Word or a similar word processing program.  The quote marks could get turned into “smart quotes” (like the ones I typed there, just now -- see how the opening and closing quotes are different from each other?).  If you need to save it off for later, Notepad or another very simple plain-text editor will be perfect, because it will keep the quotes as not smart quotes.

Find the spot in your AO3 work where you want the centered image to be.  It would be between two blocks of text which are wrapped with <p> tags, so something like this...

Into that space, you’re gonna hit Enter a couple of times (which I’ve already done in the screenshot) and then paste this block:

<p class="centered">  <img src="BANANA" alt="ORANGE" /> </p>

That was the block to paste.  Before you’re done, you need to change two things!

BANANA goes away.  Inside the quote marks where BANANA used to be, you need to put the URL of your image.  This URL must start with http or https (preferably https), or else it won’t work.  I can’t give specific instructions on how to get this, because it depends on where the image is hosted!  If it’s only on your computer, or attached to an email, it can’t be embedded.  It has to have been put somewhere on the web, like Flickr, Photobucket, or Google Drive.  It will work to embed from Tumblr, but I don’t trust Tumblr not to change everything up and bork all the old image URLs, thus breaking your embedded images on an arbitrary date in the future.  (Any image host could theoretically do this, but -- well.  We’re all familiar with Tumblr, right?)

ORANGE also goes away.  Inside the quote marks where ORANGE used to be, you optionally can (I recommend you do!) put a brief (200 characters or fewer) description of the image.  This is text which is invisible when viewing your fic in a normal browser -- it’s there for screen reader technologies, used by people who are blind or otherwise have trouble seeing a screen.  Their screen reader software will literally read out to them, so that they can hear it with their human ears, the description you put here.  Don’t start it with “image of” or “picture of”, because the screen reader tells the human that it’s an image already.  Here is a pretty user-friendly guide on how to write alt text!  If you’re more technically-inclined, the W3C has more involved docs.  Remember, the screen reader is going to say out loud whatever you put here, so don’t make it super long, or else you’ll force people who are using screen readers to wait through the long description for your story to continue. 

A finished version of the banana/orange block might look like this:

<p class="centered">  <img src="https://www.my-nifty-example-website.com/prettypicture.jpg" alt="Two dogs having a tea party wearing fancy hats" /> </p>

Step four: do it again if needed.

If you have more images to center in the same work, just repeat step 3 for each!  Step 2 has to be done once per work.  Step 1 might be done once ever (and then you just keep pulling that same skin into many works), or you might do it multiple times (if you want other changes in the skin that are special to only this one work).  I do a different skin every time I have a fic that needs a skin, but that’s because I do extra fancy things that are different for each fic.

You never have to do either step 1 or step 2 more than once per work, even if it’s multi-chapter.  In future chapters of the same fic, just do step 3 again.

Step five: preview and/or temporary draft is your friend

I am an IT professional with a (technically expired but work with me here) Microsoft certification in HTML5/CSS and seven years of writing this stuff for pay under my belt.  Even I don’t post without previewing.  Preview and saving as a draft without publishing are both your friends.

Some fun(?) notes

What you are doing here is using cascading style sheets.  The AO3 skin is a very simple stylesheet, which is a series of rules that your readers’ browsers will use to apply to text in your story.  There are standards that all your normal sort of browsers (Firefox, Chrome, Safari, Edge, Opera...) are supposed to follow when they see these rules, so that no matter which browser someone uses, a webpage will look as similar as possible.

A skin created from the above steps defines a class named “centered” and tells the browser how “centered��� should look.  Then, in your fic, if you apply the class named “centered” to something in the big editor -- like, say, the <p>aragraph tag that wraps around your image -- then the style from your skin will be applied. 

The magic of cascading style sheets is that you can define your class exactly once and then use it many times.  If you decide you want to change all the places you used it -- maybe you want every centered image in your 87-chapters-long heavily-illustrated fic to have a green border? -- you have to change exactly one place: your skin.  The change will bubble down to every single place you used it.

Skins do not allow all the features of true CSS (no media queries; I am sad), and you can’t put comments in your skin (the editor strips them out).  Browser-specific overrides also do not work (if you don’t know what this means, that’s okay, you have to go to extra work to try to use them in the first place).  But they’re still pretty cool.

A lot of people will just put <center> tags around their thing, and use width=“100%” or some other number, but that is technically not standard HTML, hasn’t been for a very long time, and sooner or later Chrome is going to get clever and stop respecting it.  (Google’s developers like to make Chrome very clever and change how it does things just because they feel like it.  It makes my day job rather more difficult.  Ask me about SameSite cookies!! Actually, don’t.  Never ask me about that thing.)

For portrait-oriented illustrations -- taller than they are wide -- I like to float the image to the right of the text and have it take up no more than 50% of the width of the screen (as seen near the end of this chapter).  But that is a more complicated thing than this one, and I am keeping it simple today.  Maybe I’ll show how to do the nice floaty at some point.

For any-oriented illustrations, you could have a small resized version which links out to a larger version as a click-to-zoom thing.  That is also a little more complicated, so it isn’t in this post.

Questions and clarifications welcome.

That is how to center and nice-size an image in an AO3 fic using a work skin!  I hope you are having a good day.

[divinector]

CSS Animated Blob

[drxgonfly]

Page 01 by Drxgonfly

I made a page!!! (well two pages) They’re pretty similar. Basic css/html knowledge required- notes on how to edit are inside the code. Feel free to message me if anything is confusing! This is also an entry for @codingcabin ‘s pagecraft challenge. This also looks pretty darn nice paired with the theme I made for the last challenge.. just sayin ;) I’m using it as my navigation page if you wanted to see an example of how I used it!

all images used are from unsplash :)

Features:

Unlimited Boxes

Unlimited Tags in each box

Masonry Layout

Multicolumn

A small image within each box

A title for each box

One accent color

Version 1 / Code: taller boxes and a header. Links are divided into two columns in a neat orderly fashion.

Version 2 / Code: wider boxes w/o a header. Links are in one big blob.

[lostseawords]

LIVE THEMES:     1     -     2     -     3     -     4

LIVE PROMOS:     1     -     2

CONTACT ME

Theme backgrounds start at $15 Theme codes start at $15 Backgrounds + coding starts at $25 Flat 100x100 icons are $5/50 Icon PSDs are $3 Applying icons PSDs is $3/50 Creating 100x100 icons + applying the PSD is $6/50 (+ the cost of the PSD) Promos start at $10 Code consultations start at $5

Hello!! My name’s Andrew & I’ve been apart of the roleplay community here on tumblr for a little over a decade. I’m 24 years old & because of how much fun I’ve had discovering how to use HTML/CSS & photoshop, I’ve made a freelancing career out of it while I go to school for a BA in web design! I really love creating beautiful things on this website & I love spreading the commodity of a nice theme, flashy promo, & killer icons across the community!

On a personal level, I’m a disabled trans man. I’ve never been able to hold down a retail job for long & as so, I’ve been broke my entire life, living off what the government deems enough for me. I won’t complain too much, it’s enough to get by but it’s never been enough to get anywhere with my transition. On top of that, I plan on moving out of my emotionally abusive (formerly physically abusive) home in the next year, so I’d really like to start saving now so that plan doesn’t fall through.

All that is to say: I’ve done commissions on this website on & off for as long as I’ve been on it & I’d really like to start again! I’m also accepting donations that’ll be put towards transitioning & moving out if you feel so inclined. I’d very much appreciate it either way.

My themes are all 100% original. I’ve coded every inch of every theme I’ve ever made with the small exception of the music player I use & the famous ‘blob in a jar’ code which can be included or excluded on a client to client basis. All my photoshop creations are also 100% original with no influence from others PSDs. My prices will always reflect the fact that these projects are labors of love but also of high quality. 

[cssmonster]

Explore 24 Dynamic CSS Blob Effects

Dive into a carefully curated collection of free HTML and CSS blob effect code examples sourced from Codepen, GitHub, and other reputable resources. This November 2021 update brings 9 exciting new additions to help you infuse your web design with unique and eye-catching blob effects. Discover, customize, and enhance your website's visual appeal with these captivating animations. Related Articles: - Explore 15+ Interactive CSS Bubbles for Your Web Projects Author Temani Afif April 8, 2022 Links Demo and Code Download Made with HTML / CSS About a Code CSS Blob Checkbox Dive into the world of CSS blob effects with this singular animation detail. Explore how to create a dynamic and eye-catching blob checkbox using CSS, adding a unique touch to your web design effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Fabrizio Calderan March 22, 2022 Links Demo and Code Download Made with HTML / CSS About a Code Blob Effect Immerse your web design with a captivating blob effect, a singular animation detail that adds a dynamic and eye-catching touch to your website. Explore the creative potential of blob animations for a unique visual experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: Yes Dependencies: - Author Temani Afif January 6, 2022 Links Demo and Code Download Made with HTML / CSS About a Code The Blob II Step into the world of "The Blob II," a singular animation detail that brings a unique and dynamic element to your web design. Explore the creativity and innovation behind this captivating web animation. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: -

Author NANOUU December 16, 2021 Links Demo and Code Download Made with HTML / CSS About a Code Drop Experience the magic of "Drop," a singular animation detail that adds depth and intrigue to your web design. Explore the creative possibilities of this captivating visual element. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author TheDevEnv December 8, 2021 Links Demo and Code Download Made with HTML / CSS About a Code CSS Blob Animation and Glassmorphism Explore the fascinating combination of blob animation and glassmorphism achieved with CSS. Dive into this singular animation detail to add a dynamic and sleek visual element to your web design effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Jon Kantner September 29, 2021 Links Demo and Code Download Made with HTML / CSS About a Code RGB Blob Preloader Experience the mesmerizing RGB Blob Preloader, a singular animation detail that enhances your web design with dynamic visual appeal. Explore how this creative element adds a unique touch to your website's loading process, captivating your audience from the start. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Temani Afif June 25, 2021 Links Demo and Code Download Made with HTML / CSS About a Code Pure CSS Blob Effect with Zero HTML Elements Discover the enchanting world of a pure CSS blob effect created without a single HTML element. Dive into this singular animation detail and elevate your web design with dynamic and eye-catching visuals, all achieved with the power of CSS alone. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Shrinath Prabhu May 19, 2021 Links Demo and Code Download Made with HTML / CSS About a Code Animated Blobs Immerse your web design with the magic of animated blobs, a singular animation detail that adds dynamic and eye-catching visual effects. Explore the creative possibilities of blob animations for a unique web experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Colleen Lohr March 4, 2021 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code Animated Neumorphism Blob Checkbox Explore a unique experiment with checkboxes, where version one showcases a simple reveal animation upon check to unveil the captivating animated blob. Immerse your web design in the innovative world of neumorphism with this singular animation detail. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Adam Dipinto November 29, 2019 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code Social Card Hover Elevate your web design with the "Social Card Hover," a singular animation detail that adds an interactive and engaging element to your website's social media cards. Explore the magic of hover effects for a captivating user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Juan Pablo February 27, 2019 Links Demo and Code Download Made with HTML / CSS About a Code Blobs, Grids, and Viewport Units Explore a fascinating demo showcasing the explicit placement of blobs on a grid using viewport units. Dive into this singular animation detail and learn how to create dynamic web layouts that captivate your audience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Amli February 25, 2019 Links Demo and Code Download Made with HTML / CSS About a Code CSS Animated Blobs Text in Multiple Colors Elevate your text design with animated blobs created solely with CSS. Explore this singular animation detail that adds a splash of creativity and dynamic color to your web content effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Jhey February 24, 2019 Links Demo and Code Download Made with HTML (Pug) / CSS (Stylus) About a Code Randomly Generated CSS Lava Lamp Dive into the world of the "Randomly Generated CSS Lava Lamp," where blob characteristics are uniquely crafted on each load using random CSS variables. Experience a different and captivating lamp with every visit, adding dynamic flair to your web design effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Mark February 20, 2019 Links Demo and Code Download Made with HTML (Pug) / CSS (SCSS) About a Code Blended Photo & Gradient Blob Animation Immerse your web design with a mesmerizing animation that combines blended photos and gradient blobs. This singular animation detail, created with border-radius and Unsplash images using SCSS and Pug, adds a dynamic and captivating touch to your website's visuals. Explore the creative possibilities of this unique animation. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Leena Lavanya February 20, 2019 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code Animated Blobby Gooey Button Discover the magic of an animated blobby gooey button, a singular animation detail that injects playful and interactive elements into your web design. Dive into this captivating button experience and explore its creative potential for enhancing user engagement. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author sasi jj February 19, 2019 Links Demo and Code Download Made with HTML / CSS About a Code Dashing Blob Ball Experience the excitement of the "Dashing Blob Ball," a singular animation detail that adds a dynamic and eye-catching element to your web design. Dive into the world of creativity with this captivating web animation. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author MARK February 19, 2019 Links Demo and Code Download Made with HTML (Pug) / CSS (SCSS) / JavaScript About a Code Animated Blob Cursor Elevate user engagement with an animated blob cursor, a singular animation detail that adds a dynamic and interactive element to your web design. Explore how to create this eye-catching feature for a unique browsing experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Kari Sabine Malmin February 13, 2019 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code Border Radius Blob Discover the fascinating world of the Border Radius Blob, a singular animation detail that uses CSS properties to create a captivating and visually appealing blob effect. Explore how to implement this creative element into your web design effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Monica Dinculescu January 23, 2019 Links Demo and Code Download Made with HTML / CSS About a Code CSS Morphing Blob Experience the mesmerizing world of a CSS-only morphing blob, a singular animation detail that transforms and captivates your web design effortlessly. Explore the magic of dynamic shapes and fluidity in web animations. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Piotr Galor October 15, 2018 Links Demo and Code Download Made with HTML / CSS About a Code Pure CSS Gooey Morph Experience the magic of a pure CSS gooey morph, where SVG is not involved. This singular animation detail primarily animates border-radius, with added effects like opacity and basic transforms, enhancing your web design with captivating visual flair. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Adam Kuhn June 5, 2018 Links Demo and Code Download Made with HTML (Haml) / CSS (SCSS) About a Code Pure CSS Blob Card UI Immerse your web design in creativity with these pure CSS cards featuring a captivating blob effect. Explore this singular animation detail and learn how to enhance your website's visual appeal effortlessly. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Cassie Evans April 4, 2018 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code CSS/SVG Blobby Background Discover the magic of a singular CSS/SVG blobby background, created by harnessing SVG filters and masks for animation. Dive into the world of creative web design with this captivating animation detail, adding an eye-catching visual element to your website. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Cassie Evans April 4, 2018 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code CSS/SVG Blobby Background Discover the magic of a singular CSS/SVG blobby background, created by harnessing SVG filters and masks for animation. Dive into the world of creative web design with this captivating animation detail, adding an eye-catching visual element to your website. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Dependencies: - Author Marjo Sobrecaray April 17, 2017 Links Demo and Code Download Made with HTML / CSS (SCSS) / JavaScript About a Code Draggable Blob with Sass Take a deep dive into the world of draggable blobs created using Sass collections. This singular animation detail is an experiment in dynamic animations, adding interactivity and creativity to your web design effortlessly. Explore the possibilities of interactive blobs on your website. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Author Marcos Silva February 13, 2017 Links Demo and Code Download Made with HTML / CSS (SCSS) About a Code CSS-Only Blob Animation Immerse your web design with a mesmerizing CSS-only blob animation, a singular animation detail that adds dynamic flair to your website effortlessly. Explore the creative possibilities of this unique visual effect for an engaging user experience. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: no Dependencies: - Read the full article

[castdemos]

Today makes it 30 whole days of me coding for a minimum of 1hr out the day. It’s interesting the first 7 days I felt like this was a chore, by day 15 I was like “ok this ain’t so bad” and now at day 30 I feel like this is normal. Building a new habit is literally getting up every day and making the choice to do it until it becomes normal or just a part of the way you live. By day 100 I’ll become a giant blob of codes 🤣🤣😭 Today’s rainbow was made a @codepen challenge called orange and blue. The only rule was to use the colors orange and blue. Check it out on Codepen to see the many cool codes people created using orange and blue by searching on Codepen cpc-orange-blue. ** I do n't own the song. This song is the property of its creator. Sung by Judy Garland in The Wizard of Oz, 1939. Ps. I only know this song because in middle school I was in chorus and our teacher loved this song. Made us memorized it and sing it every chance she got 😩 #100daysofcode #css #codepen #codependency #codepenchallenge #womenintech #blackgirlscode #girlswhocode #codinglife #coding #codingbootcamp #codingforbeginners #javascript #html #htmlcss #webdeveloper #webdesign #rainbow #judygarland #codingtutorials #codingisfun #codingnewbie https://www.instagram.com/p/B33Q_d2Ab96/?igshid=1hohelko4qii

[freefrontend-blog]

10 CSS Blob Effects. Collection of free HTML and CSS blob effect code examples. 🔗 https://freefrontend.com/css-blob-effects/