- کلیک راست بر روی تصویر
- انتخاب چندین تصویر
- بهینهسازی تصاویر موجود در فایلهای CSS
ایجاد تصاویر Sprite
<?xml version="1.0" encoding="utf-8"?> <sprite xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://vswebessentials.com/schemas/v1/sprite.xsd"> <settings> <!--Determines if the sprite image should be automatically optimized after creation/update.--> <optimize>true</optimize> <!--Determines the orientation of images to form this sprite. The value must be vertical or horizontal.--> <orientation>vertical</orientation> <!--File extension of sprite image.--> <outputType>png</outputType> <!--Determin whether to generate/re-generate this sprite on building the solution.--> <runOnBuild>false</runOnBuild> <!--Use full path to generate unique class or mixin name in CSS, LESS and SASS files. Consider disabling this if you want class names to be filename only.--> <fullPathForIdentifierName>true</fullPathForIdentifierName> <!--Use absolute path in the generated CSS-like files. By default, the URLs are relative to sprite image file (and the location of CSS, LESS and SCSS).--> <useAbsoluteUrl>false</useAbsoluteUrl> <!--Specifies a custom subfolder to save CSS files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectoryForCss /> <!--Specifies a custom subfolder to save LESS files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectoryForLess /> <!--Specifies a custom subfolder to save SCSS files to. By default, compiled output will be placed in the same folder and nested under the original file.--> <outputDirectoryForScss /> </settings> <!--The order of the <file> elements determines the order of the images in the sprite.--> <files> <file>/Content/Images/01.png</file> <file>/Content/Images/02.png</file> <file>/Content/Images/03.png</file> <file>/Content/Images/04.png</file> </files> </sprite>
/* This is an example of how to use the image sprite in your own CSS files */ .Content-Images-01 { /* You may have to set 'display: block' */ width: 32px; height: 32px; background: url('icons.png') 0 0; } .Content-Images-02 { /* You may have to set 'display: block' */ width: 32px; height: 32px; background: url('icons.png') 0 -32px; } .Content-Images-03 { /* You may have to set 'display: block' */ width: 32px; height: 32px; background: url('icons.png') 0 -64px; } .Content-Images-04 { /* You may have to set 'display: block' */ width: 32px; height: 32px; background: url('icons.png') 0 -96px; }
<div class="Content-Images-01"></div> <div class="Content-Images-02"></div> <div class="Content-Images-03"></div> <div class="Content-Images-04"></div>
<img src="https://www.dntips.ir/images/logo.png" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />
<img src="data:image/png;base64,iVBOR..." />
Some months ago a feature landed in Xamarin.Forms that seemed to truly polarize the Xamarin.Forms community: support for styling applications using CSS. Some argued that it was an unnecessary introduction to "Web" technology to the native development experience, and others that it simply isn't the right solution to the problem. While I sympathize with the latter opinion and think there's plenty of room for some good debate on the right path forward, I count myself as part of a third camp: I think that CSS is a powerful (and frequently maligned) solution to the problem of styling native mobile applications.
- Productivity and Performance improvements – Visual Studio is more responsive and usable, and projects load faster.
- Improved tooling to profile and understand your applications performance.
- Updated JavaScript and TypeScript tooling, including improved Vue.js and ESLint support, and right-click context menu productivity improvements.
- More C++ productivity improvements in IntelliSense, Code Analysis, and Just My Code debugging.
- Improved performance for Visual Basic integer manipulation.
- Azure Development improvements, including continuous delivery for Azure Functions, better experience managing secrets via Key Vault, and ability to configure Application Insights during initial site creation.
- More Library Manager features for managing Web Projects’ client-side library files.
- Mobile Development improvements such as faster Android incremental builds and inclusion of Xamarin.Essentials to facilitate building native apps.
Material Design برای bootstrap
This Bootstrap theme is an easy way to use the new Material Design
guidelines by Google in your Bootstrap 3 based application.
Just include the theme right after the Bootstrap CSS and include the
javascript at the end of your document, everything will be converted to
Material Design (paper) style
Here's a couple of final thoughts.
- 3 major front end frameworks (Angular, React, and Vue)
- React is the highest growing and highest paying front end framework
- Express is still the dominant Node framework by far
- TypeScript is becoming more and more popular (and it's going to take over...just my thought)
- Tooling is making JavaScript a more evolved and appealing language
- Options to reach almost any platform (desktop, mobile, server, web, hybrid, etc.)
- Graphql is on the rise, especially with the rise of Gatsby.js
Just My Code برای جاوا اسکریپت
With the new Office Developer Tools for Visual Studio 2013 – March 2014 Update comes a feature called “Just My Code” for JavaScript, which can speed up your debugging experience by allowing you to focus on debugging your own code, and not library or framework code. In this post, I’ll walk through how this works
مقایسه React و Blazor
Web application development has evolved with the rise of new technologies and frameworks. Two of the most popular technologies for building interactive web applications are Blazor and React. In this article, we will compare Blazor and React and highlight their differences with examples.