coding: design

Показаны сообщения с ярлыком design. Показать все сообщения

среда, 26 февраля 2020 г.

SVG Кривая c изменяемым размером длинны

#css #css3 #svg #design


Есть необходимость построить блок в дизайне которого, встречается изогнутая градиентная
кривая, как на рисунке. Как это сделать, если неизвестно сколько текста будет в СЕО
блоке, и необходимо чтобы данная кривая имела возможность "тянуться" по высоте в зависимости
от родителя с текстом 

 

Пример кода я накидал



html,
body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: Roboto, sans-serif;
}

body {
  background-color: #17161d;
}

.bl_fullWrapper {
  width: 100%;
  position: relative;
  min-height: 220px;
}

.bl_left,
.bl_right {
  position: relative;
  display: inline-block;
  padding: 30px;
}

.bl_left {
  width: calc(80% - 300px);
  margin-right: 5%;
  vertical-align: top;
}

.bl_right {
  width: 25%;
}

.bl_img {
  position: relative;
  width: 300px;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background-color: #1e1b27;
}

.bl_img img {
  margin-top: 16px;
  margin-left: -26px;
}

.curvedLine {
  position: absolute;
  top: 0;
  left: -10%;
  width: 100%;
}

  
    Title text very long
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ipsa, similique et eius ratione suscipit corporis iste impedit libero, fuga natus,
dignissimos autem harum temporibus neque tenetur facere fugiat iusto. Vero accusantium
impedit placeat ea,
      consectetur nesciunt repellat minima dicta soluta qui, pariatur fugiat exercitationem,
optio quae iure sint labore rerum.libero, fuga natus, dignissimos autem harum temporibus
neque tenetur facere fugiat iusto. Vero accusantium impedit placeat ea,
      consectetur nesciunt repellat minima dicta soluta qui, pariatur fugiat exercitationem,
optio quae iure sint labore rerum libero, fuga natus, dignissimos autem harum temporibus
neque tenetur facere fugiat iusto. Vero accusantium impedit placeat ea,
      consectetur nesciunt repellat minima dicta soluta qui, pariatur fugiat exercitationem,
optio quae iure sint labore rerum
  
  
    
      
    
  

  






только он не адаптивный, как хотелось бы. Кто может посоветовать, как  реализовать
данный элемент дизайна, желательно без JS, средствами CSS + SVG ?

Ответы

Ответ 1


Правильнее было бы сверстать на flex без inline-block, но что есть, то есть...

Надеюсь, что выставите нужные отступы, в соответствии с макетом:



html,
body {
  height: 100%;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: Roboto, sans-serif;
}

body { background-color: #17161d; }

.bl_fullWrapper {
  min-height: 220px;
  width: 100%;
  padding-top: 30px;
}

.bl_left,
.bl_right {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  padding: 30px;
}

.bl_left {
  width: calc(100% - 365px);
  vertical-align: top;
}

div.bl_left:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -4px;
  height: 33px;
  width: 70%;
  border-radius: 0 0 30px 0;
  border-bottom: 3px solid #ca375f;
  border-right: 3px solid #ca375f;
}

div.bl_left:before {
  content: "";
  position: absolute;
  bottom: 30px;
  top: 30px;
  right: -4px;
  height: calc(100% - 60px);
  width: 3px;
  background: linear-gradient(to top, #ca375f, #ef8e34);
}

.bl_right { width: 360px; }

div.bl_right:after {
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  height: 33px;
  width: calc(100% - 30px);
  border-radius: 30px 0 0 0;
  border-top: 3px solid #ef8e34;
  border-left: 3px solid #ef8e34;
}

.bl_img {
  width: 300px;
  border-radius: 10px;
  background-color: #1e1b27;
  box-shadow: 16px -16px 10px 0px rgba(0, 0, 0, 0.2);
}

.bl_img img { border-radius: 5px; }

  
    Title text very long
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ipsa, similique et eius ratione suscipit corporis iste impedit libero, fuga natus,
dignissimos autem harum temporibus neque tenetur facere fugiat iusto. Vero accusantium
impedit placeat ea,
      consectetur nesciunt repellat minima dicta soluta qui, pariatur fugiat exercitationem,
optio quae iure sint labore rerum.libero, fuga natus, dignissimos autem harum temporibus
neque tenetur facere fugiat iusto. Vero accusantium impedit placeat ea,
      consectetur nesciunt repellat minima dicta soluta qui, pariatur fugiat exercitationem,
optio quae iure sint labore rerum libero, fuga natus, dignissimos autem harum temporibus
neque tenetur facere fugiat iusto. Vero accusantium impedit placeat ea,
      consectetur nesciunt repellat minima dicta soluta qui, pariatur fugiat exercitationem,
optio quae iure sint labore rerum
  
  
    
      
    
  





Разверните на всю страницу и изменяйте размер окна браузера, чтобы проверить адаптивность.

суббота, 11 января 2020 г.

Как сделать декоративный элемент (см картинку)

#html #css #веб_дизайн #design




Подскажите как реализовать верстку белого пунктира и сделать на сгибах круги с цифрами?
Это не должно быть изображением. Между изгибами будет вставлен текст.

Ответы

Ответ 1


html,
body {
  position: relative;
  background-color: #308a56;
  color: #fff;
  font-size: 20px;
  line-height: 20px;
}

.item {
  position: relative;
  padding: 3rem;
  text-align: center;
}

.item+.item {
  margin-top: -2px;
}

.item:after {
  content: '';
  position: absolute;
  display: block;
  bottom: -2px;
  border-bottom: 2px dashed #fff;
  left: 6.6rem;
  right: 6.6rem;
}

.item__text {
  height: 1rem
}

.item__num {
  position: absolute;
  border: 2px solid #fff;
  line-height: 3rem;
  font-size: 1rem;
  top: 2rem;
  height: 3rem;
  width: 3rem;
  border-radius: 3rem;
  background-color: #308a56;
  z-index: 2;
}

.item_left .item__num {
  left: 1rem
}

.item_right .item__num {
  right: 1rem
}

.item_center .item__num {
  right: 0;
  left: 0;
  margin: auto;
}

.item__num:after {
  content: '';
  position: absolute;
  display: block;
  bottom: -2rem;
  border-bottom: 2px dashed #fff;
  height: 2rem;
  width: 4rem;
  z-index: 1
}

.item_left .item__num:after {
  left: 50%;
  border-left: 2px dashed #fff;
  border-radius: 100% / 0 0 0 3rem;
}

.item_right .item__num:after {
  right: 50%;
  border-right: 2px dashed #fff;
  border-radius: 100% / 0 0 3rem 0;
}

.item__num:before {
  content: '';
  position: absolute;
  display: block;
  top: -2rem;
  border-top: 2px dashed #fff;
  height: 2rem;
  width: 4rem;
  z-index: 1;
}

.item_left .item__num:before,
.item_center .item__num:before {
  left: 50%;
  border-left: 2px dashed #fff;
  border-radius: 100% / 3rem 0 0 0;
}

.item_right .item__num:before {
  right: 50%;
  border-right: 2px dashed #fff;
  border-radius: 100% / 0 3rem 0 0;
}

.items .item:first-child .item__num:before,
.items .item:last-child .item__num:after,
.items .item:last-child:after {
  display: none;
}
.item.item_before-center:after {
  left: calc(4rem + 50%)
}

  
    1
    text
  
  
    2
    text
  
  
    3
    text
  
  
    4
    text
  
  
    ⌄

Как сделать такой listbox

#c_sharp #wpf #mvvm #gui #design


Здравствуйте, подскажите пожалуйста как сделать такой listbox на wpf+mvvm?  Как вертикальную
линию я знаю как сделать, а вот с остальным вообще нет идей, так ладно сделать кастомный
контейнер, мне вот интересно как организовать бизнес модель (грубо говоря за бизнес
модель служить у нас будет list из классов структурой msg[Integer idmsg, String text,
Date prishlo, Integer idUser]) :(



UPD #1 :

Ну вот, такой у меня ItemTemplate :

Ответы

Ответ 1


У меня получился такой вариант.

VM-классы:

class MessageVM : VM
{
    public MessageVM(string text, DateTime postedAt, UserVM author)
    {
        Text = text; PostedAt = postedAt; Author = author;
    }
    public string Text { get; }
    public DateTime PostedAt { get; }
    public UserVM Author { get; }
}

class UserVM : VM
{
    public UserVM(string name) { Name = name; }
    public string Name { get; }
}


XAML:


    
        
            
                
                     
                      
                       
                
                
                    
                    
                
                
                    
                    
                        
                        
                        
                    
                    
                    
                    
                    
                        
                            
                        
                    
                
                
            
        
    



Кроме того, чтобы форматирование даты соответствовало текущему языку, вам нужно в
конструкторе App использовать следующее заклинание:

public App()
{
    FrameworkElement.LanguageProperty.OverrideMetadata(
          typeof(FrameworkElement),
          new FrameworkPropertyMetadata(
              XmlLanguage.GetLanguage(CultureInfo.CurrentCulture.IetfLanguageTag)));
}


Результат:



Нижний круг меньше, чтобы 15 пикселей нижней части линии смогли влезть.

пятница, 27 декабря 2019 г.

Просмотр статических полей класса с помощью рефлексии типов.

#c_sharp #net #design #рефлексия


класс Building используется как более гибкая альтернатива Enum'ам (Type safe enum
pattern ).
Хотелось бы иметь возможность просматривать доступные статические поля в рантайме.
В моем решении каждый такой класс должен будет однообразно реализовать статический
метод GetAllFields() , что мне не особо нравится.
Есть ли более элегантное решение данной проблемы , чем мое?
public abstract class ABase {  
  protected static IEnumerable GetAllField(Type type) {
    var res = from x in type.GetFields()
              where x.IsStatic == true
              where x.IsPublic == true
              select x.GetValue(null);
    ABase obj;
    foreach(var item in res) {
        if(!(item is ABase))
            continue;
        obj = item as ABase;
        yield return obj;
    }
  }
}

public sealed class Building : ABase {
  public static readonly Building House = new Building();
  public static readonly Building Castle = new Building();

  public static System.Collections.Generic.IEnumerable GetAllFields() {
    return GetAllField(typeof(Building));
  }

}

Ответы

Ответ 1


Попробуйте так:
public abstract class ABase {  
  public IEnumerable GetAllFields() {
    return GetType().GetFields(BindingFlags.Static)
                    .Select(fi => fi.GetValue(null))
                    .Where(f => f is ABase)
                    .Cast();
  }
}

Для статического метода трюк не сработает :(


Ответ 2


Я бы решил эту задачу таким образом:

public abstract class ABase
{
  protected static IEnumerable GetAllField() => typeof(T)
    .GetFields(BindingFlags.Static | BindingFlags.Public)
    .Select(x => x.GetValue(null))
    .OfType();

  public string Name { get; protected set; }
}

public sealed class Building : ABase
{
  public static readonly Building House = new Building(nameof(House));
  public static readonly Building Castle = new Building(nameof(Castle));

  private Building(string name)
  {
    Name = name;
  }

  public static IEnumerable GetAllFields() => GetAllField();
}


Вы можете обойтись без свойства Name в ABase, тогда метод GetAllField может возвращать
IEnumerable для Вашего примера в комментариях.

А в моем примеры Вы можете проходить коллекию так:

foreach (var item in Building.GetAllFields())
{
  Console.WriteLine(item.Name); // Ваша логика.
}


UPD:
Можно автоматизировать создание read only полей, например так:

public abstract class ABase
{
  protected static IEnumerable GetAllField() => typeof(T)
    .GetFields(BindingFlags.Static | BindingFlags.Public)
    .Select(x => x.GetValue(null))
    .OfType();

  protected static void Init() => typeof(T)
      .GetFields(BindingFlags.Static | BindingFlags.Public)
      .ToList()
      .ForEach(x => x.SetValue(null, Activator.CreateInstance(typeof(T), x.Name)));

  public string Name { get; protected set; }
}

public sealed class Building : ABase
{
  public static readonly Building House;
  public static readonly Building Castle;

  public Building(string name)
  {
    Name = name;
  }

  static Building()
  {
    Init();
  }

  public static IEnumerable GetAllFields() => GetAllField();
}


Но не могу не согласить с VladD что лучше перейти к instance-методам.

среда, 18 декабря 2019 г.

Как убрать полосу в заголовке приложения?

#android #design


Вопрос от новичка программирования Android.

Есть свежесгенерированный, мною ещё не изменённый проект. Несмотря на почти пустое
содержание activity_main.xml, в приложении отображается вот-эта полоса:



Как её убрать?

Ответы

Ответ 1


Вставь в теге , в которой хочешь убрать title код:
android:theme="@android:style/Theme.Black.NoTitleBar"


Ответ 2


// Убрать ActionBar
getSupportActionBar().hide();

// Показать ActionBar
getSupportActionBar().show();


Ответ 3


Добавь в onCreate
requestWindowFeature(Window.FEATURE_ NO_TITLE);


Ответ 4


\res\values\styles.xml

Выбираем тему без экшн бара:

coding

Страницы

Поиск по вопросам

среда, 26 февраля 2020 г.

SVG Кривая c изменяемым размером длинны

Title text very long

Ответы

Ответ 1

Title text very long

суббота, 11 января 2020 г.

Как сделать декоративный элемент (см картинку)

Ответы

Ответ 1

Как сделать такой listbox

Ответы

Ответ 1

пятница, 27 декабря 2019 г.

Просмотр статических полей класса с помощью рефлексии типов.

Ответы

Ответ 1

Ответ 2

среда, 18 декабря 2019 г.

Как убрать полосу в заголовке приложения?

Ответы

Ответ 1

Ответ 2

Ответ 3

Ответ 4

Страницы

Поиск по вопросам

среда, 26 февраля 2020 г.

SVG Кривая c изменяемым размером длинны

Title text very long

Ответы

Ответ 1

Title text very long

суббота, 11 января 2020 г.

Как сделать декоративный элемент (см картинку)

Ответы

Ответ 1

Как сделать такой listbox

Ответы

Ответ 1

пятница, 27 декабря 2019 г.

Просмотр статических полей класса с помощью рефлексии типов.

Ответы

Ответ 1

Ответ 2

среда, 18 декабря 2019 г.

Как убрать полосу в заголовке приложения?

Ответы

Ответ 1

Ответ 2

Ответ 3

Ответ 4

среда, 26 февраля 2020 г.

суббота, 11 января 2020 г.

пятница, 27 декабря 2019 г.

среда, 18 декабря 2019 г.