The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »

Data Graham: Dec 28, 2009; 📈📊🍪😋

Angular's great in theory but every new project I come into that uses it uses it with Bootstrap, and AngularStrap is such a clusterfuck.

# ? May 1, 2016 14:37

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 13:20

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

Data Graham posted:

Angular's great in theory but every new project I come into that uses it uses it with Bootstrap, and AngularStrap is such a clusterfuck.

This is the first I've ever heard this. What makes this combination a clusterfuck? I developed and deployed a web app last year that used Angular and Bootstrap and it went just fine.

# ? May 1, 2016 16:13

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

IAmKale posted:

This is the first I've ever heard this. What makes this combination a clusterfuck? I developed and deployed a web app last year that used Angular and Bootstrap and it went just fine.

While I prefer Angular Material to Bootstrap, there's nothing really wrong with Bootstrap itself. This is probably due to the projects being a first/second project for the developers using Angular. Angular does not have great documentation, especially for larger application architecture, and the good stuff that does exist is easily drowned out by all the bad/old advice that is still out there. Imagine scaling a large application up using ng-controller, ng-init, and ng-include.

# ? May 1, 2016 16:28

kedo: Nov 27, 2007

Grump posted:

How do you make a portfolio when none of your stuff is only hosted locally?

If most (or all) of your projects only exist locally I'd probably suggest getting some web hosting to put them on. You can link to those sites from your portfolio. That way people can at least click through them.

# ? May 1, 2016 21:39

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

Skandranon posted:

While I prefer Angular Material to Bootstrap, there's nothing really wrong with Bootstrap itself. This is probably due to the projects being a first/second project for the developers using Angular. Angular does not have great documentation, especially for larger application architecture, and the good stuff that does exist is easily drowned out by all the bad/old advice that is still out there. Imagine scaling a large application up using ng-controller, ng-init, and ng-include.

As far as documentation goes, the AngularJS docs should just point to John Papa's Style Guide: https://github.com/johnpapa/angular-styleguide

I read that before I started working on anything intended for production and a couple months later I had no idea why $scope ever bothered anyone. If you're doing it properly there's almost no reason to use $scope or $rootScope since everything can be compartmentalized into individual controllers. And individual sections of your site can be siloed into their own folder, so module reuse is stupid-easy. I get that Angular2 is going the React route of encouraging you to write components, but honestly Angular1 is still just as capable.

# ? May 1, 2016 21:52

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

IAmKale posted:

As far as documentation goes, the AngularJS docs should just point to John Papa's Style Guide: https://github.com/johnpapa/angular-styleguide

I read that before I started working on anything intended for production and a couple months later I had no idea why $scope ever bothered anyone. If you're doing it properly there's almost no reason to use $scope or $rootScope since everything can be compartmentalized into individual controllers. And individual sections of your site can be siloed into their own folder, so module reuse is stupid-easy. I get that Angular2 is going the React route of encouraging you to write components, but honestly Angular1 is still just as capable.

The ability to properly do away with $scope only came with 1.3 (bindToController), but there are still a lot of places that show using $scope like it's a good idea (including Googles own AngularJS tutorials), and countless StackOverflow articles. Angular1 done right is very capable, though I do like the direction Angular2 is going, it allows for solving a number of performance problems in Angular1.

# ? May 2, 2016 04:31

Love Stole the Day: Nov 4, 2012; Please give me free quality professional advice so I can be a baby about it and insult you

So I'm most of the way through this Node tutorial as well as the chapter about it in that Oreilly Javascript book.

Is the framework or whatever that Heroku automatically sets you up with the standard for making things with this Node thing? Because when I search for node.js on Github, I see main.js equivalents looking like they just extended on what the Heroku people automatically setup for you when you make a new app or whatever on their site. for example, this one

# ? May 2, 2016 05:19

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Does anyone use Interface.js? I can't get it to run. I'm even trying the test code and none of the widgets are working. I don't know if there's a problem with dependencies because I'm including the interface script in my head, but nothing's happening.

Need some help.

https://github.com/charlieroberts/interface.js

# ? May 2, 2016 05:43

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

The Dave posted:

"Will the user figure this out?"

"No they're too dumb."

This is the world of UX.

"If you make something idiot proof, someone will just make a better idiot"

# ? May 2, 2016 15:12

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Love Stole the Day posted:

So I'm most of the way through this Node tutorial as well as the chapter about it in that Oreilly Javascript book.

Is the framework or whatever that Heroku automatically sets you up with the standard for making things with this Node thing? Because when I search for node.js on Github, I see main.js equivalents looking like they just extended on what the Heroku people automatically setup for you when you make a new app or whatever on their site. for example, this one

Do you mean Express? If so, yes, it's a very common http server framework for node.

# ? May 2, 2016 15:29

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

Grump posted:

Does anyone use Interface.js? I can't get it to run. I'm even trying the test code and none of the widgets are working. I don't know if there's a problem with dependencies because I'm including the interface script in my head, but nothing's happening.

Need some help.

https://github.com/charlieroberts/interface.js

I used it successfully for a couple of things last year. Have you any code or a Gist that I can scan for clues?

The demos work for you, right? http://www.charlie-roberts.com/interface/

# ? May 2, 2016 17:31

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

ynohtna posted:

I used it successfully for a couple of things last year. Have you any code or a Gist that I can scan for clues?

The demos work for you, right? http://www.charlie-roberts.com/interface/

Nope demos won't even work for me. I just straight copied and pasted the code from the demos and I'm getting a blank screen.

code:

<html>
    <head>
        <script type="text/javascript" src="Tone.js"></script>
        <script src="nexusUI.js"></script>
        <script src="interface.js"></script>
    </head>
    <body>
        <script>

            var a = new Interface.Panel({ 
              container:document.querySelector("#buttonPanel") 
            });

            var b = new Interface.Button({ 
              bounds:[.05,.05,.3,.9],  
              label:'toggle'  
            });
            var c = new Interface.Button({ 
              bounds:[.35,.05,.3,.9],
              label:'momentary',
              mode:'momentary'  
            });
            var d = new Interface.Button({ 
              bounds:[.65,.05,.3,.9],
              label:'contact',
               mode:'contact'  
            });

            a.background = 'black';   
            a.add(b,c,d);

        </script>
    </body>
  
</html>

# ? May 2, 2016 18:44

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Grump posted:

Nope demos won't even work for me. I just straight copied and pasted the code from the demos and I'm getting a blank screen.

code:

<html>
    <head>
        <script type="text/javascript" src="Tone.js"></script>
        <script src="nexusUI.js"></script>
        <script src="interface.js"></script>
    </head>
    <body>
        <script>

            var a = new Interface.Panel({ 
              container:document.querySelector("#buttonPanel") 
            });

            var b = new Interface.Button({ 
              bounds:[.05,.05,.3,.9],  
              label:'toggle'  
            });
            var c = new Interface.Button({ 
              bounds:[.35,.05,.3,.9],
              label:'momentary',
              mode:'momentary'  
            });
            var d = new Interface.Button({ 
              bounds:[.65,.05,.3,.9],
              label:'contact',
               mode:'contact'  
            });

            a.background = 'black';   
            a.add(b,c,d);

        </script>
    </body>
  
</html>

What errors are in the console?

# ? May 2, 2016 18:52

Ytlaya: Nov 13, 2005

I have a quick question about a web tool I develop for. Here is an example page on my development site for reference: http://gn2-zach.genenetwork.org/show_trait?trait_id=1427571_at&dataset=HC_M2_0606_P

This page (the trait page) is a hub of sorts, where the user might want to run a variety of tools (primarily correlations/mapping). Before doing so, they can change/remove samples (from the list at the bottom of the page) or change other settings specific to the tool in question.

My question is whether there is any reasonable alternative to having target="_blank" in the form element. I know that it is usually preferred to avoid target="_blank", but it seems like it would be extremely irritating for the user if they have to hit back and redo all of their options/changes to samples after running a tool. Ideally I would be able to treat the submit buttons like hyperlinks, where the user can just right-click and choose if they want to open in a new tab/window, but I can't think of any way to do that with a form submission like this (using GET seems like it would be awkward here, given the potentially huge amount of parameters since it needs to pass all the sample data, which might be hundreds/thousands of individuals).

Is there any way for me to give the user the ability to optionally open in a new tab/window in this situation? And if not, is this a situation where it is acceptable to use target="_blank"?

# ? May 2, 2016 18:55

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Lumpy posted:

What errors are in the console?

Getting:

interface.js:282 Uncaught TypeError: Cannot read property 'left' of undefined

# ? May 2, 2016 18:59

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

Grump posted:

Getting:

interface.js:282 Uncaught TypeError: Cannot read property 'left' of undefined

Your HTML does not have a container element of id="buttonPanel" to host the canvas, as referenced in your JS here:

code:

var a = new Interface.Panel({ 
    container:document.querySelector("#buttonPanel") 
});

# ? May 2, 2016 19:03

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Okay cool it's working. Didn't realize you had to use html and style it to get it to show up.

I was just working with Nexus UI which required no styling, but I can't figure it out.

I'm in way over my head using javascript libraries for this final project. Especially ones with limited tutorials

I'm gonna see how successful I am using tone.js with interface

# ? May 2, 2016 22:59

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Grump posted:

Okay cool it's working. Didn't realize you had to use html and style it to get it to show up.

I was just working with Nexus UI which required no styling, but I can't figure it out.

I'm in way over my head using javascript libraries for this final project. Especially ones with limited tutorials

I'm gonna see how successful I am using tone.js with interface

Why do you need to use a UI library at all?

# ? May 2, 2016 23:01

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

I'm making a step sequencer. My professor pointed me at tone.js but I looked at interface and thought it would make interaction easy

The idea is to have a matrix of toggle buttons. The y axis is the pitch of the squares while the x axis is the rhythm. When the play button is toggled, it will run through the sequence the user creates

Nexus ui has a preset customizable matrix I need and tone.js has the musical part. I guess I don't need interface but I thought it would help.

Right now I need to give each button on the matrix it's own pitch and then loop through each column on the matrix in whatever beats per minute. Then send that sound created to a toggle button

# ? May 3, 2016 00:14

huhu: Feb 24, 2006

v1nce posted:

Alternatively if you choose not to plaster your name on the homepage, you can use the root domain to aggregate BOTH of your sites into a single blog-roll on the root domain, but the link would go through to the individual sites.
All three sites can/should share a header bar which provides some layout conformity, and lets you hop between the engineering and photography sites. That improves my browsing experience if I'm looking at things about you rather than something specific to do with photography.

I really like your aggregate both sites into a blog on the main page. Is there an easier way than setting up a wordpress installation on the homepage to do this or is that the easiest route?

# ? May 3, 2016 01:00

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

Depends. If you have a reliance of Wordpress plugins to generate the article body (short tags) then you've really no choice than to run a WP install which can handle that. It gets pretty fuzzy on how you can accomplish this goal if you rely on short tags heavily.

If I had to do it, I'd probably go with either of these two options:
1. Wordpress instance with its own RSS aggregator plugin, harvesting from the two sites.
2. Standalone RSS aggregator script which periodically updates/queries your individual sites and harvests the post synopsis. Very custom.

The standalone one if obviously more difficult. There may be a script out there, or you could rework code from the WP RSS Aggregator plugin to achieve the same goal without WP attached to the backend.

Another complex alternative is to write a WP plugin which exports posts to PHP files that you aggregate site can import and combine. That'll preserve the HTML and resolve the short tags, but it's also the most custom.

# ? May 3, 2016 05:46

Jo: Jan 24, 2005; Soiled Meat

Looking for a recommendation for a JS UI framework or a set of CSS styles, or maybe just some general advice. I've been programming for just over two decades, but I'm still absolutely garbage when it comes to making user interfaces. I've got a backend that I built for searching and uploading images (think Pandora for pictures), but I'm floundering a bit on the front-end. I wrote the JS underpinnings which load the state of the application from the central server, but it's early enough along that I could throw stuff away without feeling too bad. I have three ID-indexed types comments, images, and perceptual hashes. I also have user data which is pulled as JSON.

I was thinking about going the Angular route, but I'm trying to shy away from NPM/Bower/Grunt/Gulp in favor of something tiny like a single JS or CSS include. I'll put my prejudice aside if the former is the way to go.

My constraints are: (1) it has to look good, (2) be reasonably maintainable, (3) not produce 8gb of JS. I do NOT need compatibility with IE6 or anything like that. As far as 1 is concerned, I know there's no substitute for artistic style, but if I can easily add quick transitions and UI elements to improve the user's feeling of interactivity, rather than just having stuff run in the background, that would help.

Elm looks neat and FRP is cool. :3:

ClojureScript also looks cool because there's nothing to install but leiningen.

# ? May 3, 2016 18:30

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Jo posted:

Looking for a recommendation for a JS UI framework or a set of CSS styles, or maybe just some general advice. I've been programming for just over two decades, but I'm still absolutely garbage when it comes to making user interfaces. I've got a backend that I built for searching and uploading images (think Pandora for pictures), but I'm floundering a bit on the front-end. I wrote the JS underpinnings which load the state of the application from the central server, but it's early enough along that I could throw stuff away without feeling too bad. I have three ID-indexed types comments, images, and perceptual hashes. I also have user data which is pulled as JSON.

I was thinking about going the Angular route, but I'm trying to shy away from NPM/Bower/Grunt/Gulp in favor of something tiny like a single JS or CSS include. I'll put my prejudice aside if the former is the way to go.

My constraints are: (1) it has to look good, (2) be reasonably maintainable, (3) not produce 8gb of JS. I do NOT need compatibility with IE6 or anything like that. As far as 1 is concerned, I know there's no substitute for artistic style, but if I can easily add quick transitions and UI elements to improve the user's feeling of interactivity, rather than just having stuff run in the background, that would help.

Elm looks neat and FRP is cool. ClojureScript also looks cool because there's nothing to install but leiningen.

Angular would be a good choice for this, especially if combined with AngularUIBootstrap or Angular Material, as it can do most of the 'make look nice' part for you. You CAN write it all in a single .js file, though this will make actual maintenance harder in the long run. Some investment into Gulp can get you to a really good place in terms of bundling & deploying your app such that you don't need to keep adding includes, but this is not a problem that Angular introduces, using any frameworks/libraries is going to incur this cost, and doing it all via pure JS on your own is likely to be a much bigger time sink than learning to use a few of the JS tools out there.

# ? May 3, 2016 19:51

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Jo posted:

Looking for a recommendation for a JS UI framework or a set of CSS styles, or maybe just some general advice. I've been programming for just over two decades, but I'm still absolutely garbage when it comes to making user interfaces. I've got a backend that I built for searching and uploading images (think Pandora for pictures), but I'm floundering a bit on the front-end. I wrote the JS underpinnings which load the state of the application from the central server, but it's early enough along that I could throw stuff away without feeling too bad. I have three ID-indexed types comments, images, and perceptual hashes. I also have user data which is pulled as JSON.

I was thinking about going the Angular route, but I'm trying to shy away from NPM/Bower/Grunt/Gulp in favor of something tiny like a single JS or CSS include. I'll put my prejudice aside if the former is the way to go.

My constraints are: (1) it has to look good, (2) be reasonably maintainable, (3) not produce 8gb of JS. I do NOT need compatibility with IE6 or anything like that. As far as 1 is concerned, I know there's no substitute for artistic style, but if I can easily add quick transitions and UI elements to improve the user's feeling of interactivity, rather than just having stuff run in the background, that would help.

Elm looks neat and FRP is cool. ClojureScript also looks cool because there's nothing to install but leiningen.

For the CSS bit, there are a bunch of minimal CSS "frameworks" like milligram, pure, and kube out there that might be what you need.

My personal opinion is to avoid Bootstrap like the plague. While there are many advantages to using something that "does everything" I have found the time and hassle fighting it when you want to do something non-default not worth it, and all the bootstrap specific markup you need makes it hard to switch away if you want to.

As for JS framework, I'd go with React/ Redux. Or elm =)

# ? May 3, 2016 20:15

huhu: Feb 24, 2006

v1nce posted:

Depends. If you have a reliance of Wordpress plugins to generate the article body (short tags) then you've really no choice than to run a WP install which can handle that. It gets pretty fuzzy on how you can accomplish this goal if you rely on short tags heavily.

If I had to do it, I'd probably go with either of these two options:
1. Wordpress instance with its own RSS aggregator plugin, harvesting from the two sites.
2. Standalone RSS aggregator script which periodically updates/queries your individual sites and harvests the post synopsis. Very custom.

The standalone one if obviously more difficult. There may be a script out there, or you could rework code from the WP RSS Aggregator plugin to achieve the same goal without WP attached to the backend.

Another complex alternative is to write a WP plugin which exports posts to PHP files that you aggregate site can import and combine. That'll preserve the HTML and resolve the short tags, but it's also the most custom.

Awesome, thanks for all your help.

# ? May 3, 2016 20:27

Jo: Jan 24, 2005; Soiled Meat

Skandranon posted:

Angular would be a good choice for this, especially if combined with AngularUIBootstrap or Angular Material, as it can do most of the 'make look nice' part for you. You CAN write it all in a single .js file, though this will make actual maintenance harder in the long run. Some investment into Gulp can get you to a really good place in terms of bundling & deploying your app such that you don't need to keep adding includes, but this is not a problem that Angular introduces, using any frameworks/libraries is going to incur this cost, and doing it all via pure JS on your own is likely to be a much bigger time sink than learning to use a few of the JS tools out there.

Lumpy posted:

For the CSS bit, there are a bunch of minimal CSS "frameworks" like milligram, pure, and kube out there that might be what you need.

My personal opinion is to avoid Bootstrap like the plague. While there are many advantages to using something that "does everything" I have found the time and hassle fighting it when you want to do something non-default not worth it, and all the bootstrap specific markup you need makes it hard to switch away if you want to.

As for JS framework, I'd go with React/ Redux. Or elm =)

Thanks for the suggestions.

I guess I'll keep diving into Elm and will try to wrap Kube into my application.

# ? May 3, 2016 23:09

Team_q: Jul 30, 2007

I'm primarily a game developer, with experience mostly in Actionscript and Unity. With over 6 years working with those and similar technologies.I worked a tiny bit with Parse.net and I've done my own lame websites for over 2 decades on services such as Dreamhost.

I want to get more into the web development side of things and I've come up with what I think is a fairly simple project but I worry I don't have enough knowledge to know exactly what I don't know. I'm planning on learning some skills on a project.

The basic idea is that it would be a user log-in app that you could log your exercises and it would figure out various data, with a results page that could be accessible, I realize that there are several similar sites, but none work specifically how I want, and again, I want to learn. I'm looking for functionality first, then I will pretty it up.

I'm not sure what technology to start with, I have a basic understanding of building out client connections to servers, but I don't have much of an idea of the back end.

Team_q fucked around with this message at 02:16 on May 4, 2016

# ? May 4, 2016 02:12

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

You've got a poo poo load of choices, but my standard thing I'd direct people towards is Django, which is written in Python, it'll help you fall into the pit of success most of the time, and is exceptionally well documented compared to many other projects like it.

That'll handle your back end, you can use Django Rest Framework to turn into an API as well if you want the front of the site to be a single page app (but maybe hold off on that to start off with)

Once you want to jazz up your front end, you'll be looking into something like Angular to build your front end application, that's the bit people run on their browser. I personally prefer React + Redux but Angular is hopefully opinionated enough that you can just sort of follow best practices on it and end up with something decent. Its' documentation is not the best, so you could also try Ember, however I have no experience with that.

This will probably take a while to get the hang of, but if you're already plenty familiar with programming languages just working through the tutorials and starting to assemble your app might work, so your reading/learning list is then:

Just getting started, you could do a rough prototype with:
Python
Django

Once you want to make the website like a single page application:
Django REST Framework
Angular

edit: like many posts this is clearly opinionated towards some technologies, I think they're pretty good for beginners because they handle a lot of the edge cases you won't think of getting started (and are reasonable well documented). Also expects you'll need to put a lot of work into learning the tech, but I'm assuming you already know that.

Maluco Marinero fucked around with this message at 02:28 on May 4, 2016

# ? May 4, 2016 02:25

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Team_q posted:

I'm primarily a game developer, with experience mostly in Actionscript and Unity. With over 6 years working with those and similar technologies.I worked a tiny bit with Parse.net and I've done my own lame websites for over 2 decades on services such as Dreamhost.

I want to get more into the web development side of things and I've come up with what I think is a fairly simple project but I worry I don't have enough knowledge to know exactly what I don't know. I'm planning on learning some skills on a project.

The basic idea is that it would be a user log-in app that you could log your exercises and it would figure out various data, with a results page that could be accessible, I realize that there are several similar sites, but none work specifically how I want, and again, I want to learn. I'm looking for functionality first, then I will pretty it up.

I'm not sure what technology to start with, I have a basic understanding of building out client connections to servers, but I don't have much of an idea of the back end.

Another approach you could take for such an application is use an SPA framework (Angular, React, etc) and pair it with a web backend service like Firebase. Firebase is basically a NoSQL database with built in data synchronization, authentication and security. It has libraries for use with all of the major web frameworks, a pure REST API, and iOS and Android. This way you don't need to worry about the difference between backend coding and frontend, as everything is essentially frontend. Firebase is also free (for small instances).

# ? May 4, 2016 02:39

Team_q: Jul 30, 2007

I was looking into Firebase, and I was a bit overwhelmed with technologies I haven't had much experience with, that's why I turned to you knowledgeable folks.

# ? May 4, 2016 02:52

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Depends where you want to focus your time, web development has become a pretty broad field, if you want to understand the basics of the back end Django might be a good bet, but if you use Firebase you might be able to shortcut straight to learning what you need to on Angular.

# ? May 4, 2016 02:56

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Team_q posted:

I was looking into Firebase, and I was a bit overwhelmed with technologies I haven't had much experience with, that's why I turned to you knowledgeable folks.

Firebase also offers web hosting and some pretty nice command line tools for deploying to that hosting. I've been using Firebase for a recent project and I'm pretty impressed with their sync library. It works over websockets and is quite fast and efficient, as well as allowing for almost seamless push notifications from the database to the client. Actually makes things like chat applications almost trivial.

# ? May 4, 2016 04:54

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

Is there a way to use Twitter's API to tweet an image on a user's account? Basically I want to use a Web Intent but also include an image.

What I have is a form that allows you to enter an email address and enter an image. <Client> will fill out this form then user will get an email with the image. From there I want the user to be able to post the image on Twitter with minimal effort.

I can't use a Web Intent link in the email because they don't support images.

I thought about using a landing page with a Summary Card which does load the image but it is presented as a link to the landing page (bad) and you can't expand it to view the full image (bad).

Next I looked at the OAuth API which appears to allow you to upload media and post tweets, but only on the account the app is tied to?

Ideally I'd like to be able to allow users to log into their own account and tweet the image without having to say "download the file, log into Twitter and please post the image with this tweet copy kthx"

# ? May 4, 2016 17:06

pipebomb: May 12, 2001; Dear God, what is it like in your funny little brains?
It must be so boring.

Hey all. Is there a way to animate/slow this image hover transition with just css?

.wh {
-webkit-filter: drop-shadow(0px 0px 3px #000);
filter: drop-shadow(0px 0px 3px #000);
}
.wh:hover {
-webkit-filter: grayscale(1) drop-shadow(0px 0px 3px #000);
filter: grayscale(1) drop-shadow(0px 0px 3px #000);
}

# ? May 4, 2016 17:29

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

pipebomb posted:

Hey all. Is there a way to animate/slow this image hover transition with just css?

.wh {
-webkit-filter: drop-shadow(0px 0px 3px #000);
filter: drop-shadow(0px 0px 3px #000);
}
.wh:hover {
-webkit-filter: grayscale(1) drop-shadow(0px 0px 3px #000);
filter: grayscale(1) drop-shadow(0px 0px 3px #000);
}

If it's something CSS can animate (phone posting so I can't look it up easy) you can animate with:

.wh { transition: all 0.3s }

# ? May 4, 2016 19:04

Boosh!: Apr 12, 2002; Oven Wrangler

Is there a simple CSS solution to achieve this type of border?

# ? May 4, 2016 20:38

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

Boosh! posted:

Is there a simple CSS solution to achieve this type of border?

You could accomplish that with an inner and outer div.

http://codepen.io/dpmacdonagh/pen/XdoRbe

Wrote that up quickly, so the CSS isn't great, but gives you a general starting point.

# ? May 4, 2016 20:53

Boosh!: Apr 12, 2002; Oven Wrangler

That was way simple, thanks man!

# ? May 4, 2016 20:58

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Boosh! posted:

Is there a simple CSS solution to achieve this type of border?

http://codepen.io/anon/pen/MyZmeo?editors=1100 beaten, but this works without adding a div in the markup. You might have to gently caress with z-order to make the text selectable, I guess.

# ? May 4, 2016 20:58

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 13:20

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

That's a way better solution than mine

drat pseudo classes, what can't you do.

# ? May 4, 2016 21:00

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »