#html css slider
Explore tagged Tumblr posts
Visit Tumblr Blog
Explore Tumblr blogs with no restrictions, modern design and the best experience.
Last Seen Tumblr Blogs
Fun Fact
Tumblr has a low social media market share in South America.
Text
Automatic image change animation
#automatic image change animation#css animation#css animation examples#pure css animation#css slider#html css slider#css#html css#divinectorweb#html#webdesign#css3#frontenddevelopment
3 notes
·
View notes
Text
CSS Brand Logo Slider
#logo slider#brand logo slider#css slider#html css slider#codenewbies#html css#frontenddevelopment#css animation examples#html5 css3#pure css animation#css animation tutorial#css#webdesign#css3#frontend#learn to code
2 notes
·
View notes
Text
CSS HTML Slider
#image slider#automatic image slider#html css#codingflicks#css#html#css3#animation#frontend#frontenddevelopment#html css slider#css slideshow#webdesign
0 notes
Text
Carrusel de imágenes responsive y dinámico con CSS puro
HTML <!DOCTYPE html> <html> <head> <title>Carrusel de Imágenes con CSS</title> <style> /* Define el estilo del encabezado */ header { height: 300px; /* Establece la altura del encabezado */ overflow: hidden; /* Oculta cualquier contenido que sobrepase los límites del contenedor */ position: relative; /* Establece el punto de referencia para el posicionamiento absoluto de los elementos dentro del…
#animación CSS#carrusel de imágenes#carrusel infinito#código HTML#CSS#desarrollo web#Diseño web#efectos visuales#experiencia de usuario#frontend#HTML#imágenes centradas#margen entre imágenes#responsive design#slider#Tutorial CSS
1 note
·
View note
Text
Ah yes the part of web design where things look like they were engineered by a colorblind gorilla.
In related news I'm reformatting my portfolio. Again.
#oh hey im not dead#web design#web development#html5#css#htmlcoding#html css#frontenddevelopment#portfolio#html formatting#i finally figured out how to do custom scrollbars though so that's nice#turns out the answer was 'google it it takes five seconds'#trying to be more active on social medias#hopefully this will be the LAST time I reformat my portfolio#for like a year at least#time to employ the KISS method of web design#rip my cool slider things u were too complicated but will be missed nonetheless
0 notes
Text
AI Writer Services HTML Landing Page Template
Are you ready to revolutionize your AI writing services? Look no further than "Writey" - the ultimate AI Writer Services HTML Landing Page Template that combines stunning design with powerful functionality. Whether you're a content creator, or copywriter, or run an AI writing service, Writey has got you covered.
Buy Now:
#html#ai writer#landing page#template#clean design#responsive#RTL support#PHP contact form#dark theme#light theme#animations#testimonials#FAQ section#sliders#W3C validation#cross-browser compatibility#updates#accessibility#SEO optimized#fast loading#social media buttons#SCSS files#back-to-top button#coding#landingpage#css
1 note
·
View note
Video
youtube
Make Custom Image Slider Using HTML CSS and JavaScript | Devhubspot
1 note
·
View note
Note
Do you have any tips or tutorial recommendations for making your own website?
I actually really do like the Wordpress client now I've gotten the hang of it!
I did tell 1000 of my subscribers to kill themselves in an email header by accident, and also battered those poor 1000 people with something like 100 emails in increasingly frantically apologised for errors over the course of the same three days, but that was before I really Got it.
With the above oopsies in mind, if you want to import previous newsletters or posts, for the love of God, do not import your existing newsletter subscribers until after all of your backposts have been imported across. That is the main lesson I have learned.
I had such a vision in mind of a triumphant surprise email going "Hey, look what I did! Surprise! Isn't it sexy?!" and instead everyone got 30 notifications about chapter updates from 2 years ago and an email that said "It's Your Responsibility to Kill Yourself" followed by multiple deranged apologies from me.
So. Don't do that.
Other than that, I'd actually wanted a proper website for quite a few years even before Patreon got so antsy with hiding my content - I tried to set one up a few years back with Wix, and I cannot recommend that less, it's a fucking awful site to use, and it's far less user intuitive than Wordpress.
Part of my issues with Wordpress were actually that a lot of website clients, unless you're building from scratch in HTML/CSS or another code, give you everything in Blocks, and because I remembered like 10 years ago where you didn't have to do that, and you mostly altered everything on the website with like, 10000 options tickboxes and sliders, I was like "wow this is awful". I will admit now, crotchety bastard that I am, that the Blocks system is better and more intuitive once you start to understand it. I just don't always do well thinking of things in three dimensions, so to speak, and I was shooting myself in the foot by going "WELL BACK IN MY DAY--"
Wix doesn't have a very good help section because they want you to talk to their people for help, but most sites for stuff like this do have really robust FAQ and help sections, and obviously, rely on those as much as possible.
At one point I was so upset with my inability to do something that Lorenzo literally came over and told me to leave the apartment (that was the day that I went to Pets at Home and spent a ridiculous amount of money on gifts for the cat), and while I was very grumpy about doing it at the time, taking breaks is crucial, especially if you get as frustrated as I do.
I realise that most of what I have said so far is niche tips for if you're stubborn and mentally ill, so in terms of actual website building, I would say it's important to have an idea of what you want the site to do.
Do you just want a landing page, so that if people search for your name or whatever, that this is the first result? That it links people to your books or your store, your socials? Do you want to have a gallery of work on display, or an archive of writing like I've made? Do you want people to be able to contact you, give tips?
I always wanted a robustly tagged archive with an in-depth tag page like the one I've set up now, and the goal for my Directory of Work on Medium and elsewhere was always that it would later be transferred to my website once it was built.
Then, I have an about page for people who are just curious about who I am and who I look like; commission info and information about booking me for events or inviting me to cons and such; the books I have for sale, publications I've been a part of, interviews and presentations on YouTube; my events calendar with conventions and such; the gallery where I'm showing off both art of my characters and where I'll later show art that I buy for my home and myself, such as the stuff framed in the stairwell or jewellery I buy from makers at markets and such; and then, of course, the subscriber benefits.
All of the above to go my goals which are, in order, to encourage people to read my work and make it easy for them to do so, to pay me money for my existing work or to offer me money for new work, and to show support for other events, artists, friends, and queer creators.
I would definitely advise thinking carefully about how visual or how word-based you want your site to be - I had to look for a recipe blog theme to find one that was stripped back in terms of images. Especially for adult websites, I'd be careful about payment providers and so forth.
Stripe is the default on the site, and I've been very careful about making sure none of my titles or descriptions that the Stripe client will see have words like erotica or adult in them - if someone from Stripe clicks through and sees the site, they might take issue with it, but that's another thing. I do get paid by Stripe through Medium, so I do already use them.
Most payment providers hate any kind of adult content, but are willing to give a tiny bit more wiggle room on erotica, or at least, they just don't notice it in the same way they do Real Porn, but there's nothing I can say other than "be careful and more importantly, be lucky" on that front.
Most of all, I'd say to try to have fun with it and try to enjoy the actual building process if you can - make something pretty and fun to navigate as much as you can, and if you can get some enjoyment out of it, your site users will as well.
18 notes
·
View notes
Text
You know what, I'll bother making this post. It's long overdue.
PSA: Please don't install uBlock Origin rules for Tumblr that use :nth-of-type(), and please remove or fix any you have installed. They can and will hide the wrong things. I'll show you a few alternatives below.
First, an example of how we get here. I've used the uBlock Origin element picker to try to hide the "Get a Domain" sidebar item:
With some different adjustments of the sliders, it gave me these two snippets, one of which targeted a whole bunch of sidebar items, and the other of which selected the right one. Great, right? Read on.
www.tumblr.com##li.g8SYn.IYrO9:nth-of-type(7) www.tumblr.com##.gM9qK > li.g8SYn.IYrO9
As you can see, these both target a particular kind of sidebar item via "li.g8SYn.IYrO9"—fine—and as you can probably guess, the second one counts them all up and hides the seventh it finds.
This is bad, because what it actually hides depends on exactly how many sidebar items there are! Users can "snooze" Tumblr Live, which will make an item appear or disappear, and users with/without Ad-Free subscriptions will have or not have another. I have seen many, many people accidentally hide their activity, messages, inbox, etc using someone else's rule that's supposed to hide Live. Worse, some rules intended for e.g. recommended post carousels that use nth-of-type translate to something like "hide item number three on the dashboard no matter what it is," which will lead to a seemingly random post on your dashboard disappearing!
This isn't a problem specific to Tumblr, of course—I personally think uBlock Origin should never autogenerate these rules—but Tumblr has a ton of elements that aren't in fixed positions, so I feel comfortable wording that PSA the way I did. On a very static site, those rules might be fine. Here they almost always aren't.
So how do we fix this? First of all, as a developer of XKit Rewritten (check out @addons!), I must suggest you check if it has a feature to do what you want. Plenty of times it won't, though, and if not, we want to make a rule that hides an element based on what it is, not where it is. Here are three ways to make a robust rule:
First, I'll right-click the element I want and use the inspect element tool in my browser's developer tools to look at the element I really want (Firefox and Chrome/Edge/Opera have different but overall similar interfaces for this):
The HTML looks, for reference, like this (Tumblr sucks at code blocks but I'll try):
<li class="IYrO9 g8SYn" title="Get a domain"> <a class="tDT48" href="/domains"> <div class="kn4U3"> <svg> <use href="#managed-icon__earth"></use> </svg> </div> <div class="a132D"> <span class="ZC1wz">Get a domain</span> <!-- other unimportant stuff removed--> </div> </a> </li>
What's something unique about this element, preferably about the outermost element, and preferably contained within the <angle brackets> (HTML tags)? In this case, we have it easy: title="Get a domain" is definitely unambiguous and fulfills all of those three. If you're very familiar with web design using CSS, you'll know how to target that; if you've vaguely heard of CSS, you may be able to look at a reference sheet of CSS selectors, see [attribute=value], and figure it out, and if neither is true, I'll spoil it for you and say that we just put it in square brackets in this case.
So—taking the rule uBlock Origin made, removing the :nth-of-type() and replacing it with our better selector—here's our first working, bug-free uBlock Origin rule:
##li.g8SYn.IYrO9[title="Get a domain"]
Okay, great. But what if we didn't have that attribute to target? What if our top-level element looks the same as the other ones? What if we want this rule to work if we change our Tumblr language to Spanish? Let's move on to :has().
:has() is a CSS selector (supported in uBlock Origin even in browsers where you can't use it for web development yet, i.e. Firefox), that lets you check the contents of an element for whatever is in the parentheses. Let's assume that Tumblr would never make two sidebar items with the same icon, and target that href="#managed-icon__earth" property:
##li.g8SYn.IYrO9:has([href="#managed-icon__earth"])
Yep, that works too!
Finally, what if we couldn't use either of those because we need to target the content of the page that's not contained within the <angle brackets>? We can take a look at the uBlock Origin documentation and find that it has something for that too: :has-text(). You can do very powerful things with this (e.g. you can sort of implement Blacklist entirely using uBlock Origin using something like article:has-text), but it doesn't perform well and can pretty easily be used incorrectly, so I'd suggest you avoid it when possible.
However, let's try using it here to target the "Get a domain" label text:
##li.g8SYn.IYrO9:has-text(Get a domain)
And that also works!
With these techniques, you should be able to target any specific thing you'd want to hide without using any fragile positional selectors. If you're going to share your uBlock Origin rules with others, please make use of this! If you're just using your rules for yourself, then hopefully I've given you enough information so that you can understand what a rule does and decide for yourself if it's worth bothering to fix (menu item order might not change that often, so maybe you're fine with certain rules being a bit prone to breakage; if your rule hides the first post in your timeline you really do need to fix that one!)
-
And, of course, a note for you web developers out there: :has() isn't natively supported in Firefox quite yet, so you can't really use it (I would not recommend using JQuery's simulated version—it's not quite the same). And :has-text() is just not a thing for CSS at all. Just use javascript at that point! Edit: No longer true in 2024; style away!
Final note: any rule with a random 5-character string like g8SYn will eventually break when Tumblr rebuilds its CSS map, though they haven't done that in ages. But when they do: no, it's not "Tumblr devs breaking our rules because they hate us." (Yes, I hear that sentiment a lot in contexts when it almost always makes zero sense.) If you're fairly experienced with CSS you can sometimes make Stylus/uBlock Origin rules that don't reference any, but it's usually convoluted and more trouble than it's worth.
81 notes
·
View notes
Note
i wish i could show you my art but anon asking doesn't allow imagessss
-🗝️
I did some adjustments to my blog. Not sure how worthwhile it is, but if it makes you all feel more comfortable with sending images, then I don't mind.
If you see, now on my desktop view, there is a file upload widget. I had to brush up on some HTML and CSS to remember how to pad it with the theme(😩), but it's there.
I'm fairly certain it's only available on my web format of the blog page since it's a part of my custom theme.
It kind of fits weird into the blog, but I'll worry about its aesthetic later. Maybe. Nonetheless, I coded in a minimising feature in case it became an eyesore.
It's also draggable, but I think I might have scuffed that bit up. Oops.
I probably should've just made this widget an interactive slider instead, but meh. I'm not much of a coder anyways.
So, what is it?
This is fileinbox, an website that allows anonymous file uploads. Everything uploads to a folder on my email that informs me of when files are uploaded.
All files will only last seven days.
Do note that there is no prompt to verify the files you are sending. Whatever you upload when you choose a file will automatically upload, so please make sure you are certain you are sending the files you want to send.
I don't know how to know who sends it, so, if you're an anon sending it and have a claimed emoji, please save the files with the emoji.
For example: [file name] - 🗿.pdf
EDIT: If you would like me to not post anything you send, please name the file:
TO NOT POST: [filename] - [anon_emoji] - NP.[file extension] TO ALLOW POST: [filename] - [anon_emoji] - P.[file extension]
HOW TO RENAME FILES
Please do let me know if you have any complications. I did some testing, so I'm somewhat certain it should be up and running smoothly.
- ᴀ.ᴢᴇʀᴏɪ
2 notes
·
View notes
Text
Logo slider HTML CSS
#logo slider#client logo slider#html css#divinector#learn to code#code#css#frontenddevelopment#webdesign#html#css3#carousel#logo carousel
7 notes
·
View notes
Text
CSS Slideshow with Thumbnails
#html css slideshow#css slideshow#css slider#css slider with thu#css slider with thumbnail#html css#codenewbies#frontenddevelopment#html5 css3#css#css animation examples#css animation tutorial#pure css animation#code#webdesign
5 notes
·
View notes
Text
Auto Image Slideshow Join us on Telegram
#html css#codingflicks#learn to code#code#frontend#html#css#css3#auto image slideshow#slideshow html css#frontenddevelopment#html css slideshow#html css slider#css slideshow#css slider
0 notes
Text
Responsive Image Comparison Slider for Before/After Views
This is a responsive, accessible, touch-enabled image comparison slider built with HTML range input, CSS/CSS3, and a little bit JavaScript. How to use it: 1. Create the HTML structure for the image comparison slider. Wrap your images in a div with the class compare. Include your “before” and “after” images. Add a range input for the slider control. <div class="compare" style="overflow:…
2 notes
·
View notes
Text
good morning! i'm groggy but i made a to-do list for finishing up this stadium hue project for BMF. i'm thinking i should be able to finish it today or tomorrow depending on how i feel. i'm pretty excited, there's going to be multiple interactive things and a whole article and a massive image resource that did not previously exist. i'm going to be putting up like, 3-4 new pages at once haha. they're all related!
still tinkering away at the hue shift previewer is going to be the main thing, it needs a proper UI and a couple more features. i wish blue ho-oh was real...
just hue shifting these gifs on the site is more complicated than it appears since the built-in CSS hue slider uses a different method of hue sliding than the N64 and therefore is entirely inaccurate. as a result i have a system of the gifs being broken into vertically stacked spritesheets of their frames, which are continuously looped through to animate it on an HTML canvas. the hue shifting is done by editing the pixel-by-pixel HSL (hue/saturation/lightness) data of the spritesheet. it works great though!
12 notes
·
View notes