INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1066, "Photo gallery – Part 2", "Welcome to part 2 of this 2 part episode on creating an interactive photo gallery with HTML and CSS We will continue our project by adding some CSS that will react to the state of our radio buttons allowing us to change the gallery based on which thumbnail was selected We are continuing with the exercise files from part 1", "https://codifydesign.com/cms/wp-content/uploads/2018/12/CSS_Shorts_Episode_104-242x169.jpg", "CSS Position, CSS Pseudo-Classes, CSS Siblings, CSS Transitions"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1065, "Photo gallery – Part 1", "Welcome to part 1 of this 2 part episode where we ll be creating an interactive photo gallery with transitions using only HTML and CSS This will build on some concepts from earlier episodes including positioning transitions counting elements using nth of type and select elements using sibling combinators So here in part 1 we ll focus on getting our HTML ready by adding in some radio buttons and hooking them together with the thumbnail images", "https://codifydesign.com/cms/wp-content/uploads/2018/12/CSS_Shorts_Episode_103-242x169.jpg", "Figure, Forms, Interactive, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1064, "OpenType swashes", "In this episode we ll take a look at activating an OpenType font feature within our webpage using CSS OpenType is a font file format that contains some advanced typographic capabilities including features like discretionary ligatures multi language support and even alternate characters or glyphs that can be substituted for the default character", "https://codifydesign.com/cms/wp-content/uploads/2018/12/CSS_Shorts_Episode_102-242x169.jpg", "Typography, Web Fonts"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1063, "Multiple background images", "You can create more complex layouts with multiple background images in your CSS We ll show you how to apply two images to the same HTML element as background images allowing us to create a more complex layouts with less HTML This is a super cool technique that is easy to do Once you know how it s done you ll want to use this all the time", "https://codifydesign.com/cms/wp-content/uploads/2018/12/CSS_Shorts_Episode_101-1-242x169.jpg", "CSS Background Image, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1062, "Style by download type", "When you have a lot of different file type downloads in your web page it s nice to let your users know what s what You can just put plain link with the name and suffix but that s boring Using the CSS attribute selector you can determine the file type and put a graphic in for a nice visual cue for your users", "https://codifydesign.com/cms/wp-content/uploads/2018/12/CSS_Shorts_Episode_100-242x169.jpg", "CSS Attribute"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1061, "Shadow for a PNG file", "Let s get a little fancy You don t need to put your drop shadow in your graphic You can use CSS filters to create a drop shadow for a transparent PNG file so that the shadow matches the pixels in the image and not the bounding box of the whole graphic you can mu And the only browser that does not support this is IE 11", "https://codifydesign.com/cms/wp-content/uploads/2018/12/CSS_Shorts_Episode_099-242x169.jpg", "CSS Filters, CSS Transformations, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1060, "Aspect ratio", "We ll use CSS media queries to determine the aspect ratio of a web page and use that information to switch between different background graphics Why would we want to do this To give your user the best experience viewing your content Now in addition to background images you can modify anything about your layout based on the aspect ratio of the browser size or a device s screen", "https://codifydesign.com/cms/wp-content/uploads/2018/12/CSS_Shorts_Episode_098-242x169.jpg", "CSS Background Image, CSS Media Queries"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1058, "Border image", "Did you know you can use a graphic as a border image You do now In this episode we ll use a graphic as a border image by defining a slice size that will control the corners and repeat properties to control the center areas between the corners You can try different file sizes and repeat properties based on your own border images You ll want to create a ton of these", "https://codifydesign.com/cms/wp-content/uploads/2018/12/CSS_Shorts_Episode_097-242x169.jpg", "CSS Border Image, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1059, "Accordion panels", "We ll use HTML radio buttons in conjunction with the sibling combinator selector in CSS to create an interactive accordion This technique is very efficient and just plain cool This allows a lot of content in a limited space So with only HTML and CSS we re able to create an interactive experience for our users", "https://codifydesign.com/cms/wp-content/uploads/2018/12/CSS_Shorts_Episode_101-242x169.jpg", "CSS Pseudo-Classes, CSS Siblings, Forms, Interactive"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1057, "Styling placeholder text", "You don t have to just settle for the default text in your web form Take a little more design control of the placeholder text in your forms with the placeholder pseduo element This technique is not supported in IE 11 or the Edge browser but that s OK it won t affect the functionality or readability of your form in those browsers", "https://codifydesign.com/cms/wp-content/uploads/2018/12/CSS_Shorts_Episode_095-242x169.jpg", "CSS Pseudo-Elements, Forms"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1056, "Layout patterns", "We are going to build on the nth child property from the last episode and use it to add some visual interest to our layout We ll use a number counter and an offset to get the first item and then every 4th item So combining nth child with some layout properties allows to make a more visually appealing layout while keeping all of the HTML code in place for searching and accessibility", "https://codifydesign.com/cms/wp-content/uploads/2018/12/CSS_Shorts_Episode_094-242x169.jpg", "CSS Pseudo-Classes"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1055, "Every nth element", "We can use the nth child selector in CSS to pick out specific HTML elements in in a group With this technique you can count through items and pick out an item to style This allows you to do once and done Let CSS do the counting and add intelligent styling to our page without adding any extra HTML code", "https://codifydesign.com/cms/wp-content/uploads/2018/12/CSS_Shorts_Episode_093-242x169.jpg", "CSS Flex, CSS Pseudo-Classes"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1053, "Striped pattern with CSS", "You can create endless styles patterns and shapes for your web page by just using CSS In this episode we ll create some gradient stripes for the background of our page Once you have the base pattern set up in your CSS file you can reset the angles and change the color combination for endless possibilities", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_092-242x169.jpg", "CSS Background Image"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1052, "Add content from attribute values", "Sometimes when you lift the HTML hood of your page you may find all kinds of great information that can you can use In this episode we ll use a pseudo element to add content to our web page What content you ask We ll grab the value of the HTML element attribute we found under the hood Sounds complicated but it s pretty easy and the results look great", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_091-1-242x169.jpg", "CSS Attribute, CSS Position, CSS Pseudo-Elements"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1051, "Curve your header", "Curves are a good thing Why not add some curves to your web page header It s super easy We ll show you how to create a curved header element With some border margin and width properties we can create a nice clean curved header We ll even it all out with a quick header rule and your done in under 5 minutes", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_090-242x169.jpg", "CSS Background Image"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1050, "3D product box – part 1", "This is part 1 of a 3 part series on creating a 3D product box In this series we ll use HTML CSS and a sprite sheet graphic in order to make a 3D box graphic for our web page In this episode we ll create the necessary HTML and CSS in order to create the three visible sides of our product box Now let s start getting familiar with X Y Z", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_087-242x169.jpg", "CSS 3D, CSS Background Image, CSS Transformations"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1049, "3D product box – part 2", "This is part 2 of a 3 part series on creating a 3D product box In this series we ll use HTML CSS and a sprite sheet graphic in order to make a 3D box graphic for our web page In this episode we ll add a sprite sheet graphic to the sides of our product box then position the background graphic to match the artwork to the corresponding side We ll pick up where we left off in part 1", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_088-242x169.jpg", "CSS 3D, CSS Background Image"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1048, "3D product box – part 3", "This is part 3 of a 3 part series on creating a 3D product box In this series we ll use HTML CSS and a sprite sheet graphic in order to make a 3D box graphic for our web page In this episode we ll scale and position our 3d box to fit within a web page layout How crazy cool is that You can amaze your family friends AND clients", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_089-242x169.jpg", "CSS 3D, CSS Position, CSS Transformations"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1047, "Indicating required form fields", "You can indicate to the user what is a required form field without needing to add any HTML to your web page The trick is to simply lock onto the require attribute and then style the label so the user has a visual indication of what is required And did you know you can use a graphic instead of an asterisk You do now", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_086-242x169.jpg", "CSS Attribute, CSS Pseudo-Classes, CSS Pseudo-Elements, CSS Siblings"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1046, "Styling a progress bar", "Progress bars are great to let a user know status This progress bar can adapt to various values in order to provide feedback We ll be using some javascript to hard code some values so we can see the style but don t worry the script is included You ll be ready to add this progress bar to any web application and provide dynamic feedback to your users", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_085-242x169.jpg", "CSS Position"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1044, "Coloring SVG with CSS", "SVG files are really cool However did you know by adding some CSS directly into the SVG file you can take control of the color of individual shapes By finding the IDs and groups within the SVG code you can target those specific groups But don t forget to add CDATA so the CSS doesn t confuse the XML parser", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_084-1-242x169.jpg", "CSS, Groups, SVG, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1043, "Creating a star", "We ll show you how to create three triangles with CSS then rotate them to create a star shape It may look like a lot of rules but creating shapes with CSS really keeps your HTML code and page load super light and lean Please note At the time of this recording this technique is not supported in IE 11", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_083-242x169.jpg", "CSS Custom Properties, CSS Position, CSS Pseudo-Elements, CSS Transformations"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1045, "Responsive iFrames", "Putting video in your page is great and using the iframe element is pretty easy but it s not responsive out of the box We ll show you how to add some HTML and CSS to your page so your video will scale in proportion to any browser size And the bonus You can reuse this technique to make any iFrame responsive in your web page", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_082-242x169.jpg", "CSS Position, CSS Pseudo-Elements, iFrames, Responsive Design"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1042, "A sidebar with perspective", "Sure you can put that information in a plain old sidebar but why not literally turn that side bar into something a bit more interesting With a few transform and margin properties you can add some perspective to your aside element for a more visually interesting page This is the beginnings of 3D with CSS", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_081-242x169.jpg", "CSS Transformations"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1041, "Diamond shaped image crop", "We ll rotate an image then crop in on it to create a diamond shape all with CSS This may sound scary with some math calculations and theories but we ve included the formulas that can be used over and over again So you can crop and rotate an image without photo editing software and change your mind on the fly", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_080-1-242x169.jpg", "CSS Transformations, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1039, "Gradient text", "Here s a fun technique CSS gradients We ll create a gradient clip it into the shape of our headline using the background clip property At the time of this recording this technique works in most modern browsers and devices however it is completely unsupported in Internet Explorer 11 So if you are required to support IE 11 you should not use this technique as the text will be unreadable by your viewers", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_079-242x169.jpg", "CSS Background Clip, CSS Background Image, CSS Gradients"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1037, "Vertically aligned columns", "Don t you just love when your items line up especially when you need users to view at any size We ll show you how to set a couple of links with a background image to display in columns using flex properties then vertically center the content And these will vertically center no matter what size you view", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_078-242x169.jpg", "CSS Flex"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1035, "Clipping an image", "Sometimes you just need that area of an image We ll show you how to use CSS to position and crop or more technically clip an image in your web page This can be useful if you want to alter an image but either don t have photo editing software or just don t want to go through the hassle of recreating it", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_077-242x169.jpg", "CSS Clip, CSS Position"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1033, "Blur and focus rollover effect", "In this episode we ll create an effect that blurs a series of items then focuses the specific item you are rolling over Also included is an animated transition to really complete the user experience At the time of this recoding this technique will work in most modern browsers with the exception of Internet Explorer 11", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_076-242x169.jpg", "CSS Filters, CSS Transitions"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1031, "See more links", "We ll show you how to easily create a See more link to hide and show content This is really handy to get more content higher on your page keep your information concise and give your user the ability to consume the content they want This can be accomplished using CSS checkboxes and a little finesse", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_075-242x169.jpg", "CSS Pseudo-Classes, CSS Siblings, Interactive"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1029, "Animating SVG elements", "Animating SVG elements are quick easy and do not add a lot of weight to your page load We ll use CSS keyframes to add an animation within an SVG file This technique will work in most modern browsers with the exception of the Microsoft browsers which include Internet Explorer 11 and the Edge browser", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_074-242x169.gif", "CSS Animation, CSS Transformations, SVG"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1027, "Creating a speech bubble", "Adding fun shapes to your web page to call out content makes for a nice visual addition Adding imagery in the background is certainly an option but did you know you can do this with only CSS We ll show you how to create a fun speech bubble shape in order to give our block quote more visual appeal", "https://codifydesign.com/cms/wp-content/uploads/2018/11/CSS_Shorts_Episode_073-242x169.jpg", "CSS Position, CSS Pseudo-Classes, CSS Transitions"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1015, "Combining gradients and blend modes", "Want to highlight an area within an image without using a photo editing tool You can add a special effect to an image by combining a CSS Gradient and a CSS Blend Mode At the time of this recording this technique will work in most modern browsers with the exception of the Microsoft browsers which include Internet Explorer 11 and the Edge browser", "https://codifydesign.com/cms/wp-content/uploads/2018/05/CSS_Shorts_Episode_072-242x169.jpg", "CSS Background Image, CSS Blend Modes, CSS Gradients"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1009, "Spaning flex columns", "CSS is a powerful layout tool and can really keep your HTML lean and clean In this episode we ll use flex wrap and width properties in order to make a headline span across all columns within a flex container allowing for a more complex layout without the need for additional markup in the HTML file", "https://codifydesign.com/cms/wp-content/uploads/2018/04/CSS_Shorts_Episode_071-242x169.jpg", "CSS Flex"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1008, "Parallax scroll effect", "Parallax scrolling for a web page is an effect where the background image or content is moved at a different speed than the foreground content while scrolling the page Sounds complicated right But it s not You can achieve this effect by just using CSS With a few lines in your CSS files you ll have a fancy parallax scrolling page in under five minutes", "https://codifydesign.com/cms/wp-content/uploads/2018/04/CSS_Shorts_Episode_070-242x169.jpg", "CSS 3D, CSS Transformations"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1007, "CSS not selector", "We ll take a look at the CSS not selector or more formally the negation pseudo class This allows us to define a CSS rule that will select items that are not part of a selection group This feature is helpful if you already have established CSS rules and don t want to redefine them and it can be removed easily", "https://codifydesign.com/cms/wp-content/uploads/2018/04/CSS_Shorts_Episode_069-242x169.jpg", "CSS Attribute"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1005, "Creating variables", "Why do you need to repeat styles over and over again in your CSS Actually you don t We ll show you have to save yourself time and aggravation with the magic of variables These custom properties are widely supported with a few exceptions You can change your CSS styles throughout your document as easy as changing your mind", "https://codifydesign.com/cms/wp-content/uploads/2018/04/CSS_Shorts_Episode_068-242x169.jpg", "CSS Custom Properties"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1004, "Creating a vignette", "Sometimes you just don t want edges to your photo You want it to blend into the background to create a softer effect Don t have photo editing software No worries you don t need it We ll show you how to create a vignette effect for a photo by combining a background image with CSS box shadow properties Coding CAN be artistic", "https://codifydesign.com/cms/wp-content/uploads/2018/04/CSS_Shorts_Episode_067-242x169.jpg", "CSS Media Queries, CSS Pseudo-Elements, CSS Shadows"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1001, "Style Breadcrumb Links", "Breadcrumb links provide a user with a sense of the site s content hierarchy In this episode we ll style a series of breadcrumb links in order to better represent that hierarchy using pesudo elements and some position properties we ll create triangles that flow into one another to create a more visual representation of the content", "https://codifydesign.com/cms/wp-content/uploads/2018/03/CSS_Shorts_Episode_066-242x169.jpg", "CSS Position, CSS Pseudo-Elements"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (1000, "Show URLs When Printing", "While printing web pages can be handy information about hyperlink destinations will be lost on the printed page In this episode we ll use CSS to display the URLs of hyperlinks when a page is printed This will provide valuable information about the page s interactive content providing a path back to it s online counterpart", "https://codifydesign.com/cms/wp-content/uploads/2018/03/CSS_Shorts_Episode_065-242x169.jpg", "CSS Attribute, CSS Media Queries, CSS Pseudo-Elements"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (998, "3D Shadow Text", "In this episode we ll use text shadow property to create a 3d text effect The text shadow property in CSS can contain multiple sets of values This compounding of values allows to create the effect of three dimensional text within a web page Each iteration of the compounded values are changed by 1 pixel allowing the effect to be angled in any direction", "https://codifydesign.com/cms/wp-content/uploads/2018/05/CSS_Shorts_Episode_064-242x169.jpg", "CSS Shadows"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (996, "Filter a List", "This episode demonstrates a technique using CSS and radio buttons to dynamically filter a listing of items on a web page without using any JavaScript The sibling combinator selector in CSS allows us to select items in out list as they relate to the values of the radio buttons Given the fact that we can check for strings contained in the attribute values we can even assign more than category for a list item", "https://codifydesign.com/cms/wp-content/uploads/2018/05/CSS_Shorts_Episode_063-242x169.jpg", "CSS Attribute, CSS Siblings"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (994, "Force Text to Wrap", "Are long words or URLs breaking your layout This episode will show you how to use the word wrap property in CSS to help preserve your layout when you have large words or URLs in your page In a column layout smaller columns may invoke horizontal scrolling when long words are added Using this CSS technique will help improve readability as well as the page design", "https://codifydesign.com/cms/wp-content/uploads/2018/05/CSS_Shorts_Episode_062-242x169.jpg", "Typography"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (992, "Triangle Bullets", "Bullets don t have to be boring You can modify them with CSS without changing any of the HTML in your page We ll show you how to transform your plain ol round bullet shape and color into triangles for an unordered list All this can be done with modifying some of the li properties and adding a pseudo element", "https://codifydesign.com/cms/wp-content/uploads/2018/05/CSS_Shorts_Episode_061-242x169.jpg", "CSS Position, CSS Pseudo-Elements"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (961, "Setting Text on an Angle", "Have you seen angled live text on a web page Ever wondered how they did that In under five minutes we ll show you how With some CSS transform properties you can rotate the text on a web page and even match the angle of a background image And with a media query and some margin settings it ll be ready for mobile", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_060-242x169.jpg", "CSS Media Queries, CSS Transformations, Responsive Design"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (959, "Box Sizing to the Rescue", "In this episode we ll take a look at the CSS box sizing property and how this can make the sizing of elements more predictable in your web layouts regardless of the padding of those elements Now you can let the CSS calculate the element size based on the width of your layout And we ll even add a quick media query for mobile", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_059-242x169.jpg", "CSS, CSS Flex, CSS Media Queries, Responsive Design"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (957, "Circular Text Wrap with CSS", "Want a circular text wrap In your web page It s not just for print You can do it pretty quickly with the CSS Shape properties Wrapping text around images or figures integrates the copy and can make for a nice visual At the time of this recording there are just a few browsers that do not support these features of CSS", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_058-242x169.jpg", "CSS Pseudo-Classes, CSS Shapes"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (955, "Styling Telephone Links", "Styling links urls differently for your user can be useful when they have different functions In this episode we ll detect and style telephone links using a background image within our web page using CSS And if you are on a device that can make phone calls this will dial the number for you Quick and easy", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_057-242x169.jpg", "CSS, CSS Attribute, CSS Background Image"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (953, "Animating a Sprite Sheet", "If you ve never worked with animation no problem We can make it happen with CSS We ll create an animation from static frames within a single graphic file known as a sprite sheet Then using CSS keyframes we ll move the graphic within an HTML element to create the effect of motion It will be a blast", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_056-242x169.jpg", "CSS, CSS Animation, CSS Position, CSS Transformations"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (951, "A Transition for Your Mobile Menu", "You know those nice mobile menus that move effortlessly when opened and closed Sound too hard to do Well it s not We ll show you how to add a few rules to your CSS including a transition property and you are all set You ll be able to create that smooth animation to your mobile menu in under five minutes", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_055-242x169.jpg", "CSS, CSS Position, CSS Pseudo-Classes, CSS Transitions"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (949, "Adding Images with Pseudo-Elements", "We ll show you a cool trick on how to add extra graphical content such as a new or sale flag for example This can call attention or add interest to your page And doing this in code adds the graphical content to our page without adding image elements to our HTML page And if you use an SVG you can scale it easy peasy", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_054-242x169.jpg", "CSS, CSS Pseudo-Elements, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (947, "Selection colors", "Wouldn t it be nice to coordinate the text selection color of your web page content with your design It s actually fast and easy to do We ll show you how you can customize the look of selected text in your web page allowing you to control the design for a nicer user experience All this in under four minutes Who knew it d be this easy", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_053-242x169.jpg", "CSS Pseudo-Classes"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (945, "Sticky footers", "When you have really long web page you may want your footer information visible sooner rather than later and use that area for more content With some CSS we can position and fix the footer to make it stick to the bottom of the web page so as the page scrolls the content of the footer will always be visible", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_052-242x169.jpg", "CSS, CSS Position"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (943, "Creating a Grid of Images", "The CSS Grid display properties can be a powerful tool for layout We ll explore setting up a grid layout with images spanning rows and columns using these properties Now we need to note that at the time of this recording these CSS properties have limited support among the Microsoft browsers and there is no support at all on Android using a version of Chromium earlier than version 56 or on iOS using a version of Safari earlier than version 10 2 or earlier", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_051-242x169.jpg", "CSS Background Image, CSS Grid"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (941, "Interactive tabbed panels", "Creating interactive content can sometimes be tricky or involve scripting We ll show you how to create tabbed panels without all the scripting And having panels can add a lot of content in a single page So with a few sibling based CSS selectors you can create an interactive tabbed panel system with only CSS and HTML in no time", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_050-242x169.jpg", "CSS, CSS Attribute, CSS Siblings, Interactive"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (939, "Adding a QR code for print", "You don t necessarily want a QR code to display in your web page But you may want one when a user prints that page We ve got some CSS for that We ll show you how to add a QR code and a URL to a web page only when it is printed We ll use CSS to detect when a page is printed then add graphics and text using pseudo elements All this in under five minutes Print away", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_049-242x169.jpg", "CSS Media Queries, CSS Pseudo-Elements, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (937, "Continuing a numbered list", "Having an ordered list ol is fine if it s all within the same paragraph But what if your copy writer wants to have some content in between a ordered list Its not a problem anymore We ll show you how to take ordered lists and continue the numbering using CSS This way if we add or remove list items the numbering doesn t have to be manually reset in the HTML file Set it and forget it", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_048-242x169.jpg", "CSS, CSS Pseudo-Elements"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (935, "Detecting screen resolution", "Users have higher resolution devices and you want to put your best image forward But you don t want to weigh your page down with heavy images when they are not supported We ll show you how to detect a user s screen resolution with CSS then switch your imagery to match their resolution This will give the user better looking images on varying devices And everyone is happy", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_047-242x169.jpg", "CSS, CSS Media Queries"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (933, "Styling big list numbers", "Creating large lead numbers can up level your plain ol list With a few properties and pseudo class we ll replace the default numbers we get in an HTML ordered list with large styled numbers we ll generate with CSS The styling and possibilities are totally up to you So go big on your list numbers or go home", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_046-242x169.jpg", "CSS, CSS Position"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (931, "Embedding SVG art in CSS", "We ll encode the markup of an SVG file and add it directly to a CSS file It may look scary but do not worry It can be done quickly and easily with a decoder encoder and a link to a free online tool is included This can be a great way to include small graphics to your web page without needing to load extra graphic files form the server", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_045_news-242x169.jpg", "CSS Background Image, SVG"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (929, "Gradient horizontal rule", "A horizontal rule can be a nice quick and easy separator for your HTML content Did you know you can style an HR element In under 4 minutes we ll style a horizontal rule element with CSS in order to create a fading effect on the right and left sides Soften the edges a bit and it adds a nice touch to an otherwise plain rule", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_044-242x169.jpg", "CSS Gradients, HTML"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (927, "Creating polka dots", "Having a patterned background can add some fun and texture to your web page Using CSS instead of an image to create a background can speed up the load time of your page In under five minutes we ll create a polka dot pattern for the background of our web page using gradients and background properties It s spot on", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_043-242x169.jpg", "CSS Background Image, CSS Gradients"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (925, "Outline your text", "We ll show you how to create some outlined text for your web page heading complete with transparency within the letter forms Now at the time of this recording there are a few browsers on the Windows desktop platform that don t support this technique and these are IE 11 and the Edge browser however we ll set up the CSS so that those browsers will show the text in a solid color", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_042-242x169.jpg", "CSS"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (923, "Customized radio buttons", "Standard radio button are boring We ll show you how to replace the standard radio buttons in an HTML form with custom artwork How you ask We will be making use of a simple sprite sheet for the normal hover and check states allowing us to customize the user experience to match the design of our web page", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_041-242x169.jpg", "CSS Pseudo-Elements, Forms"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (921, "Display images as grayscale", "Change a full color image to display as grayscale with CSS Cool right But wait there s more We can then combine this with the opacity settings to create a duotone effect You can do all with just a few CSS properties The visual possibilities are endless Best of all you can learn how in 3 minutes", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_040-242x169.jpg", "CSS, CSS Background Image, CSS Pseudo-Elements"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (919, "Flex a Column with a Pseudo-Element", "Want to know how to add a graphic column to a web page without adding any markup to the HTML file We ll show you how by using a CSS pseudo element and some CSS flex properties By adding these elements and properties you can alter your layout without adding to your HTML or having tons of media queries for you responsive layouts", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_039-242x169.jpg", "CSS Flex, CSS Pseudo-Elements, Web Design"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (917, "Text indents", "If you have a long text heavy web page you can use CSS to create indented paragraphs to indicate breaks and save a little space just like any other document Want to exclude the first paragraph item Not a problem We ll show you how to exclude the first paragraph item within each parent element Super easy and under five minutes", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_038-242x169.jpg", "CSS Siblings"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (915, "Angled headers", "You ve seen those cool angled headers right It gives some dynamic interest to your page and can create some nice overlapping visuals for sections We ll show you how to create an angled header for your web page using a pseudo element along with some position and transformation properties in CSS", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_037-242x169.jpg", "CSS, CSS Pseudo-Elements, CSS Transformations"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (913, "Animating backgrounds", "Want a cool animated background without video or other animation If you create a graphic we ll use clouds in this example add it to the background of figure you can animate it with CSS With two CSS rules wrapped in an keyframes rule we re able to create a seamlessly lopping animation You can set the timing too So fast or slow you ve got an animation that goes on and on", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_036-242x169.jpg", "CSS, CSS Animation, CSS Background Image"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (911, "Numbering items", "Don t add content to your HTML file or manually count items What if you ever add a figure to your page or document You d have to renumber them all We ll show you how to use CSS to count specific items in our web page and dynamically add the numbers without having to manually update the HTML Kinda magical", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_035-242x169.jpg", "CSS, CSS Pseudo-Elements, Figure, HTML"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (909, "Creating a pie chart", "Creating a pie chart in HTML can seem impossible but it isn t We can create a pie chart using only HTML and CSS By combining the clip and border radius properties we can use them to create the wedge shapes So with a little bit of math HTML CSS and under 10 mins of your time you can create a pie chart to represent your data Math is cool", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_034-242x169.jpg", "CSS, CSS Position, CSS Transformations"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (907, "Indicating off-site links", "Indicating to a user that a link goes offsite or opens in a new browser window or tab is good practice With some CSS and a background image you can make that look a bit more appealing You can even animate the graphic with a transition property So if you have less than five minutes to spare you can enhance your offsite links pretty quickly And your users will thank you", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_033-242x169.jpg", "CSS, CSS Attribute"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (905, "Overlapping heading rule", "A heading rule can delineate content emphasize your heading or just add a nice element to your page With some CSS you can add a rule to a heading that allows for overlapping text without adding any additional HTML to our page If you want to add some interest or like the layered look then check out this episode", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_032-242x169.jpg", "CSS, CSS Pseudo-Elements"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (903, "Blurring images", "Do you have just an OK image Nothing special Out of focus Don t pass it over or toss it In this episode we ll blur an image with CSS We can control the blur amount and this will give us the ability to adjust the design for readability without the need to alter the original image in an graphics application Better yet you don t need to find a new image", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_031-242x169.jpg", "CSS, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (901, "Checkboxes to Switches", "We ll show you how to convert the appearance of checkboxes into switches which gives your users a move visual indication of the options they re selecting Styling form label and div elements can really enhance your users experience You can set the color shape and even use transition properties for a little animation Super fancy", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_030-242x169.jpg", "CSS, CSS Pseudo-Elements"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (898, "Mixin it up with LESS", "Mixin s work a lot like a functions in languages like JavaScript PHP and many others Mixins allow us to define some CSS properties and re use those properties for any number of other CSS rules in our document Make sure to have a compiling tool running as well so your LESS will be converted into CSS", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_029-242x169.jpg", "CSS, LESS"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (896, "Mixin it up with SASS", "Mixin s work a lot like a functions in languages like JavaScript PHP and many others Mixins allow us to define some CSS properties and re use those properties for any number of other CSS rules in our document Make sure to have a compiling tool running as well so your SASS file will be converted into CSS", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_028-242x169.jpg", "CSS, SASS"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (888, "Flex your columns", "The Flex property in CSS gives us greater control for creating layouts and they are responsive This allows us to change the layout for smaller screens And while the Flex property is still rather new all modern HTML5 browsers support the property including some partial support within IE 11 So let s go Flex", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_024-242x169.jpg", "CSS"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (894, "Put your best footer forward", "Let s explore some CSS techniques for styling text and links in a footer for multiple screen sizes without the need for a lot of extra HTML in our web page Our footer content is divided into two DIV elements and we ll use those two DIVs to style all of the footer content So let s put our best footer forward", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_027-242x169.jpg", "CSS, CSS Media Queries, Responsive Design"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (892, "Centering A Positioned Element", "There are several things to keep in mind when trying to center an absolute positioned element We ll be looking at two options using CSS Since the properties for position include top right bottom or left we ll need account for the element s width in order to center the element horizontally or the element s height to center it vertically", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_026-242x169.jpg", "CSS, CSS Position"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (890, "Let’s focus on the focus", "Have you ever had trouble finding an input field in a form Or lost your place while filling one out Learn how you can style a form element to focus on the focus This highlights the elements that are activated and awaiting user input This will allow you to provide user feedback while keeping your site s color scheme more consistent", "https://codifydesign.com/cms/wp-content/uploads/2017/06/CSS_Shorts_Episode_025_news-242x169.jpg", "CSS, CSS Pseudo-Classes"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (886, "Getting nestled with LESS", "In CSS writing specific selectors requires that you repeat selector names quite a few times once for each rule in fact LESS allows us to nest selectors when writing our CSS and once compiled the resulting CSS will contain the more verbose rules required by a web browser We covered a similar technique in a previous episode using SASS instead of LESS", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_023-242x169.jpg", "CSS, LESS"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (884, "Getting nestled with SASS", "In CSS writing specific selectors requires that you repeat selector names quite a few times one for each rule in fact SASS allows us to nest selectors when writing our CSS Using pre processor software once compiled the resulting CSS will contain the more verbose rules required by a web browser And in a future episode we ll cover a similar technique using LESS instead of SASS", "https://codifydesign.com/cms/wp-content/uploads/2017/06/CSS_Shorts_Episode_022_news-242x169.jpg", "CSS, SASS"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (882, "Drop the cap", "Having a drop cap kick off a paragraph or article can make a nice visual design statement Doing this in print No problem but how about in HTML Yes you sure can By using the first letter selector in CSS you can add more typographic style and interest to your layout without adding HTML to your web page So drop the cap Peace out", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_021-242x169.jpg", "CSS, CSS Pseudo-Classes, Typography"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (880, "Creating a grid", "In this episode we ll create a grid layout within our content by reassigning HTML elements to display as a table without a table in our page Pretty cool right But wait there s more then we ll remove the table properties allowing us to reconfigure the layout for small screens Presto change o It s now mobile friendly", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_020-242x169.jpg", "CSS, Web Design"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (878, "Column divider lines", "You have some columns but just want a little something more You can visual divide HTML elements without adding extra code to your HTML file Using CSS properties such as float margins borders and box sizing you can create subtle or heavy lines that just add nice visual dividers to your content", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_019-242x169.jpg", "CSS, CSS Pseudo-Classes, Web Design"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (876, "Vertical and center", "There are several ways to vertically center text You can use margin and padding or the flex display properties But one of the most efficient ways is to use the table display property in CSS This allows us to take advantage of the table cell properties without the rigid and extraneous HTML of an actual table Clean and simple", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_018-242x169.jpg", "CSS, CSS Pseudo-Classes"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (874, "Expand your mobile menu", "Expand your menu There are plenty of ways to create an expandable mobile menu and you may be familiar with a lot of them In this episode we will show you how easily this can be done using nothing more than HTML and CSS With just a few lines of code you ll have an interactive expandable mobile menu that can add to the user experience of your site", "https://codifydesign.com/cms/wp-content/uploads/2017/04/CSS_Shorts_Episode_017_news-242x169.jpg", "CSS, Interactive"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (872, "Color functions in SASS and LESS", "You can adjust colors in CSS quickly using both SASS and LESS When designing your project you probably have some color rules defined from a creative brief or a brand style guide Using SASS or LESS will allow you to define a color then adjust that color s properties with built in color functions This will give you a quick and consistent way to define colors and generate new colors based on the rules of your project", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_016-242x169.jpg", "CSS, LESS, SASS"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (870, "Setting a stylish table", "You can style HTML table rows and columns to create a unique look and highlight content Usually this requires additional markup But we ll show you how to style rows and columns of an HTML table without adding additional markup in our HTML file The key is using the nth child selector in CSS to style specific table row elements or visually group together table data elements to highlight columns Pretty cool", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_015-242x169.jpg", "CSS, HTML"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (868, "Give me a few tips", "Tooltips are a great way to add content such as instructions or descriptions without the clutter They have their own container the user can control the experience and they can be styled to your liking Tooltips usually require JavaScript but we ll show you a way to power them completely with HTML and CSS The best part This technique allows them to work with both click and touch events so they are mobile friendly", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_014-242x169.jpg", "CSS, Interactive"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (866, "Get your links in a row", "Do you like the look of columns and want flexibility without all the extra HTML We ll show you how to style and label rows of links in your web page without resorting to table or floating elements This is something we do pretty often especially for content with multiple references or blogs and stories with tag and category assignments The bonus It keeps the HTML very clean", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_013-242x169.jpg", "CSS, CSS Pseudo-Elements"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (864, "Hover in a hover", "Add a little extra interactivity to your hyperlinks by adding in a second nested hover state This technique can add more information or interest for people exploring your web page with a mouse or trackpad and it doesn t change the behavior of these links on touch devices It s simple to do and it will take less than 5 minutes", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_012-242x169.jpg", "CSS, Interactive"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (862, "Calc it, fix it and forget it", "CSS can do the math for you You can use the calculation function of CSS in order to dynamically change the width of one column in your layout while the other column remains at a fixed size Want some space between those columns No problem We can allow for that even without having to resort to using padding properties", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_011-242x169.jpg", "CSS, CSS Calculations, Web Design"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (860, "Setting Colors with LESS and SASS", "SASS and LESS are preprocessors that allow for maximum efficiency and can be pretty powerful when you have a never ending CSS file In this example we ll define those two values or colors as variables once in a SASS file and another in a LESS file and apply those variables within our CSS properties Then we ll be able to change the colors of the effect from one place But first you will need to be familiar with a CSS preprocessing workflow which includes using software to convert or process your files into CSS", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_010-242x169.jpg", "CSS, LESS, SASS"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (858, "First things first and last things last", "What we re talking about is first of type and last of type selectors in CSS These structural selectors do exactly what they say they allow us to select and style specific instances of elements within a parent This is a great technique for styling the beginning and ending a string of items such as links The cool thing about this type of selector is that if another element type is in the same parent this has no effect on this selector because it is based on the element s type", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_009-242x169.jpg", "CSS, CSS Pseudo-Classes"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (856, "Dress up that link", "Search engines and accessibility guidelines want your HTML elements to be simple and full of information about the content Thst s great for computers but it is not very attractive and kinda boring You can take a plain Jane SEO and accessibility friendly hyperlink and transform it into a more visually appealing graphical link using CSS Go ahead and dress up that link It ll only take five minutes", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_008-242x169.jpg", "CSS, CSS Attribute, HTML"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (445, "A Button for Your Link", "Got five minutes to spare Give your standard hyperlink some pizzazz by transforming it into a button This will definitely create a more compelling call to action and draw attention to that link for your web page visitors You can also add an arrow and hover state quite easily with CSS pseudo elements", "https://codifydesign.com/cms/wp-content/uploads/2018/01/CSS_Shorts_Episode_004-242x169.jpg", "CSS, CSS Pseudo-Elements"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (854, "A Glowing Property", "Wanna put some glow on that text Or element There is a technique that makes use of the shadow properties of CSS Now the super cool thing about these properties They can be compounded on top of one another allowing you to create all kinds of lighting and shadow effects So let s light up the night with some glowing CSS", "https://codifydesign.com/cms/wp-content/uploads/2017/01/CSS_Shorts_Episode_007_RFS-242x169.jpg", "CSS, Web Design"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (852, "You Can Quote Me", "Distinguishing a quote from the rest of your content can add visual interest and style to your article or story You can use CSS to style a block quote within a web page Adding large quotes using position and text properties can make all the difference and bring more attention to the quote And you can quote me on that", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_006-242x169.jpg", "CSS, CSS Pseudo-Elements"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (850, "Visiting the visited link", "Been there clicked that Once you start using the visited pseudo class there s no going back This episode will show you how to use CSS to show people when links match URLs in their browsing history and will also show you when privacy issues will limit your use of this trick", "https://codifydesign.com/cms/wp-content/uploads/2018/02/CSS_Shorts_Episode_005-242x169.jpg", "CSS, CSS Attribute, Interactive"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (257, "Let me float this by you", "Description goes here", "https://codifydesign.com/cms/wp-content/uploads/2016/12/CSS_Shorts_Episode_003-242x169.jpg", "CSS Float, CSS Media Queries, Figure"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (255, "What’s your position?", "Description for what s your position", "https://codifydesign.com/cms/wp-content/uploads/2016/12/CSS_Shorts_Episode_002-242x169.jpg", "CSS Media Queries, CSS Position"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (253, "Give me some background", "Description goes here for this one", "https://codifydesign.com/cms/wp-content/uploads/2016/12/CSS_Shorts_Episode_001-242x169.jpg", "CSS Background Image, CSS Gradients");