How to Make Web Design
daily web design tips and suggestions
How To Fix Outlook Dark Mode Problems (Email Design)
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#inxq{background-color:#f3f5f6;}This tutorial will show you how to fix some of Microsoft Outlook’s worst behavior when it comes to text color in Dark Mode.
Unpredictable text color changes in Outlook for Windows is one of the many mind-boggling issues you’ve no doubt encountered if you’ve ever built an HTML email for Dark Mode.
Microsoft Outlook brutally inverts colors in Dark Mode, in some cases even turning dark colors into white. Not only can this result in very unsightly parts of your email, it can also result in text that is completely illegible. Let’s fix that.
Watch the Video Tutorial
Prefer your tutorials served in video flavor? Here you go. And don’t forget to subscribe to the Tuts+ YouTube channel for new videos every day!
There are many versions of Microsoft Outlook. When I mention “Outlook” in this article I am referring to the Microsoft 365 edition of Outlook for Windows.
Coming Up
In Part 1 of this Outlook 365 dark mode tutorial, we’ll take a look at color changes for text styled with colors using HTML and CSS only.
Part 2 will deal with text color changes inside VML (Vector Markup Language) shapes.
1. Color Changes to Simple Colored Text
Let’s say you have a medium green area with some...
https://webdesign.tutsplus.com/how
15+ Figma Portfolio Templates for Crafting Stunning Photography Portfolios
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}In this roundup, we’ll be exploring some of the best Figma portfolio templates for photographers, each offering unique features and designs to help you create a portfolio that stands out.When you’re a photographer, your portfolio is your calling card. It’s the visual representation of your talent, skill, and style. But creating a portfolio that truly showcases your work in the best light can be a daunting task.
Using a Figma portfolio template for your photography is a smart choice. Image from Envato Elements.
That’s why we’ve put together this collection of Figma portfolio templates -- to help make the process of building your online portfolio a more straightforward affair. Then, you can continue to focus on what you do best: taking stunning photos.
Figma Photography Site Templates - A Quick Look
You can find many Figma portfolio templates for photography websites and landing pages at Envato Elements, which is where we’ve sourced these stunning options from today. Here’s a quick look before we get down to the details:
1. Obscura
2. Zurich
3. Photography
4. Broms
5. Glentx
6. Photography
7. Pash
8. LoveShots
9. Zenin
10. Photographer
11. Photrendz
12. Bino
13. Aloha
14....
https://webdesign.tutsplus.com/fig
What the Heck’s the Bento Box Website Trend All About?
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Staff Pick
Ruki - A Captivating Personal Blog Theme
9 bento box templates
Comment numbers and reading time displayed for blog posts
Vault - Multi-Purpose Elementor WordPress Theme
200+ design elements
Bento box landing page demo
Super clear to digest
Custar - Software & App WordPress Theme
38+ Fully Editable Templates
Gutenberg & Elementor Compatible
Bento portfolio demos Staff Pick
PageBolt - Landing Page WordPress Theme
Heavily influenced by the bento box trend
Stellar user reviews
Japanese food fans will be familiar with the term bento box. For those less au fait with it, bento refers to a meal (usually rice, meat or fish, and pickled veggies) divided into parts and packed into a box. Sure, it sounds...
https://webdesign.tutsplus.com/ben
5 Best FREE WordPress Slider Plugins
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#it6ex{background-color:rgb(243, 245, 246);}Are you confused about picking the best slider plugin for your WordPress website? This article will help you out by providing a brief overview of some of the most popular options available.
Sliders or carousels can be a useful addition to your website. They serve a lot of purposes such as showcasing featured content and products, either on the homepage or other prominent pages. You can also use sliders to show customer testimonials, information about upcoming events etc. Sliders can also make your website more visually appealing if used correctly.
Keeping the popularity of sliders in mind, it is natural that the WordPress community would have a lot of free slider plugins that you can use on your website.
Smart Slider 3
Smart Slider 3 is one of the most popular and highly rated WordPress slider plugin. It comes with a beautiful and intuitive user interface that makes it easy to create different types of slides.
This plugin offers a lot of practical features:
You can use this plugin to edit your slider in a manner similar to using page builders. The live slider editor allows you to drop multiple layers over each other and then adjust their placement using rows and columns.
Use of multiple...
https://webdesign.tutsplus.com/bes
20 Best HTML Website Templates (Most Popular on Envato Elements and ThemeForest For 2023)
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}Find The Most Popular HTML Website Templates to Use in 2023 From Envato Elements
Grand Restaurant HTML Template
If you're looking for restaurant HTML templates, try this premium option from Envato Elements. It comes packed with features to customize.
App Landing HTML Templates
This template HTML is 1170px grid-based. It has an awesome creative design and is fully customizable. Its design comes retina ready.
Isuzu Creative HTML and CSS Templates
This premium template HTML is build on HTML5 and CSS3. It come with unlimited color options and powerful features.
Uniqlo Minimal HTML and CSS Template
HTML website templates like Uniqlo are great for dropshipping and eCommerce entrepreneurs.
Professional HTML website templates offer many advantages:
HTML website templates can save you money on web design services
Save time! No need to build a website from scratch.
Built with the best coding practices. A well-coded HTML...
https://webdesign.tutsplus.com/htm
20 Best Fashion Sales Ads Banners Templates
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}
Premium Fashion Sales Banners Ad Templates
If you’re creating sales ads for your fashion store website, a great fashion sales banner ad template can help. Find the fashion sales banners ad templates on Envato Elements including the ones mentioned below:
Fashion Modern Ads Banner Template
This trendy, clean fashion banner ad template to help you promote your fashion sales includes 15 PSD template files.
Fashion Banners Ad PSD Template
How about a colorful fashion banner ads template? This one comes with 14 PSD template files that you can scale to the sizes you want.
Fashion Sale Ad Banners Template
Looking for a unique fashion sales ad banner template for your online store website? Try this template that has 20 standard ad banners sizes and comes with smart object layers for image replacement.
Fashion Sale Ad Banners
A fashion banner ads template with editable layers, 14 different size banners with multiple shapes,...
https://webdesign.tutsplus.com/bes
How to Build a JavaScript Popup Modal From Scratch
* { box-sizing: border-box; } body {margin: 0;}#ik9y{background-color:#f3f5f6;}In this tutorial we’ll learn how to build JavaScript modals (popup windows) without using a framework like Bootstrap, or a third party library. We’ll build the whole thing from scratch, giving us complete control over how it works and looks.
JavaScript Modal Demo
Here’s the demo we’ll be creating:
1. Begin With the Page Markup
First we’ll create a modal. To do this, we’ll add the .modal class and a unique ID to a container. Next we’ll specify the dialog by setting a .modal-dialog element as the direct child of the .modal. The dialog will hold the modal content. This can be any kind of content like text, images, lightboxes, user notifications/alerts, etc.
“A pop-up (or modal) is a small UI element that will appear in the foreground of a website, usually triggered as a prompt for the user to do something” – Adi Purdila
To open a modal, we’ll need any element with the data-open attribute (normally a button). The value of this attribute should be the ID of the desired modal.
By default, a modal will close if we click outside its boundaries or when the Esc key is pressed. But we can also close it if we click on any element with the data-close attribute (normally a button).
Initially the modal will appear/disappear with a fade effect. But we have the ability to adjust the animation effect of the...
https://webdesign.tutsplus.com/how
I Serve Different Hero Images Across Various Screens With CSS Variables
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#iuwg{background-color:rgb(243, 245, 246);}In this short tutorial, I’ll show you a neat way to serve different hero images across various screens with the help of CSS variables. Let’s get into it!
Section With Single Background Image
Consider the following page layout:
The page layout
Here, we have two sections: a hero section with a background image taken from Unsplash and an overlay, and another one with some text.
Although not required, just to speed up the development process, I’ve incorporated the UIkit framework. Anything that starts with uk-* is a UIkit class.
UIKit Tutorials
How to Update UIkit Components
George Martsoukos
07 Jul 2022
How to Create Responsive Mega Menus With UIkit
George Martsoukos
18 Feb 2022
How to Create a Scrollspy Navigation With UIkit
George Martsoukos
13 Jan 2022
How to Build a UIkit Lightbox With Dot Navigation
George Martsoukos
29 Nov 2021
HTML Markup
The page markup will look like this:
1
<section class="hero uk-background-cover uk-background-norepeat">
2 <div class="uk-container uk-container-small">...</div>
3
</section>
4
<section class="uk-padding-large">
5 <div class="uk-container...
https://webdesign.tutsplus.com/how
HTML (Hypertext Markup Language)
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#iq7r9{background-color:rgb(243, 245, 246);}HTML is the structural coding language we use to build web pages. Some people refer to HTML as being the “building blocks of the web”.
So what does hypertext markup language actually mean? Its origins stem back further than you might think—the concept of hypertext having been conceived as early as 1941.
As its name tells us, HTML is a markup language. Its purpose is to format information; to define meaning and structure in a document. HTML doesn’t have any programming logic.
The word hypertext in HTML refers to the links between documents. This linking of information is a core principle behind the World Wide Web, as proposed by Tim Berners Lee in 1989. The prefix “hyper” comes from Greek, and means “over” or “beyond”. So hypertext is effectively more than just text.
HTML Tags
HTML uses tags to describe various elements on a page. Usually these consist of an opening <> and a closing tag </> (though sometimes just a single tag is required). The name of the element is placed within these tags (like this: <tag>) conventionally in lowercase. For example:
1
<h1>These are opening and closing heading tags.</h1>
2
3
<p>These are paragraph tags. The...
https://webdesign.tutsplus.com/htm
HTML Element: dialog
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#iudm{background-color:rgb(243, 245, 246);}
The HTML <dialog> element is used when you want to create a modal or dialog box that overlays the main content of a web page.
You might use it to display additional information, capture user input, or present important messages or alerts.
Here are some example scenarios where you might consider using a <dialog> element:
User interactions: If you need to prompt the user for input or confirmation, such as submitting a form, deleting a record, or confirming an action, a dialog box can provide a clear and focused prompt that captures attention quickly.
Information display: When you have supplementary information that you want to present without navigating away from the current page, a dialog box can be used to provide context-specific details, instructions, or additional content.
Error or warning messages: In cases where you need to notify the user about errors, warnings, or important notifications, a dialog box can grab their attention and make sure they acknowledge the message before proceeding.
Interactive content: If you have interactive content like maps, charts, or multimedia elements that require user interaction or customization, a dialog box can serve as a dedicated...
https://webdesign.tutsplus.com/htm
31+ Best Responsive WordPress Themes (For Sites in 2023)
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Staff Pick
1. Authentic
50 demos
Page builder compatible
2. Karma
Multiple homepage layouts
Versatile design
3. Astra
Super lightweight
Starter Templates
4. Hestia
WooCommerce compatible
Modern design
5. The Retailer
eCommerce-focused
Includes page builder
6. Konte
Page builder compatible
Includes many store features
7. Squaretype
Great for blogs or magazines
WooCommerce-compatible
8. Digiqole
Magazine theme
Grid layouts...
https://webdesign.tutsplus.com/bes
15+ Best Neumorphism Design Mobile Template UI Kits
* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#inr8lj-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#i6m04c-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#ivacfg-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#icuu9h-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#isgu13-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#i80xyh-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#i9l1yh-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#ip0ews-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#inxx7j-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#iau64i-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}#i4r6np-2{line-height:1.6em;font-family:system-ui, Roboto, Arial, sans-serif;}
Neumorphism is an established trend in mobile UI design at this point. It focuses on creating soft, smooth designs and subtle shadows to create a realistic 3D effect. And with its modern, minimalist aesthetic and attention to detail, it's easy to see why designers have gravitated toward this style over the past few years.
To help you get started with neumorphism in your own projects, we've...
https://webdesign.tutsplus.com/bes
